SVG 및 JavaScript로 원형 백분율 진행 표시줄을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

SVG 및 JavaScript로 원형 백분율 진행 표시줄을 만드는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-11-15 13:11:02

원래의

686명이 탐색했습니다.

How to Create a Circular Percent Progress Bar with SVG and JavaScript?

원형 퍼센트 진행률 표시줄 만들기

모형에 표시된 것과 같은 원형 퍼센트 진행률 표시줄을 만들려면 다음과 같은 이유로 SVG 사용을 고려하세요. 둥근 모양을 만드는 데 유연성이 있습니다.

SVG 코드:

<svg viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="251.2,0"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>           
  </path>
  <text>

로그인 후 복사

CSS:

body {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

svg {
  width: 25%;
}

로그인 후 복사

JavaScript(선택 사항):

애니메이션을 적용하려면 진행률을 높이고 백분율을 높이려면 다음 jQuery를 사용하십시오. 코드:

var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

로그인 후 복사

결과:

SVG 코드는 노란색 배경과 흰색 진행 표시기가 있는 원형 진행률 표시줄을 만듭니다. JavaScript 애니메이션은 진행률 표시줄 중앙에 표시되는 백분율을 5초에 걸쳐 0에서 100%까지 증가시킵니다.

위 내용은 SVG 및 JavaScript로 원형 백분율 진행 표시줄을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!