ProgressBar.js - 아름다운 반응형 SVG 진행률 표시줄

ProgressBar.js는 동적 SVG 경로를 사용하는 아름답고 반응성이 뛰어난 진행률 표시줄 효과입니다. ProgressBar.js를 사용하면 어떤 모양의 진행률 표시줄도 쉽게 만들 수 있습니다. 이 JavaScript 라이브러리는 선, 원, 사각형과 같은 여러 가지 기본 제공 모양을 제공하지만 Illustrator나 기타 벡터 그래픽 편집기를 사용하여 자신만의 진행률 표시줄 효과를 만들 수 있습니다.

줄 진행률 표시줄:

var line = new ProgressBar.Line('#example-line-container', {
    color: '#FCB03C'
});
 
line.animate(1);

원 진행률 표시줄:

var circle = new ProgressBar.Circle('#example-circle-container', {
    color: '#FCB03C',
    strokeWidth: 2,
    fill: '#aaa'
});
 
circle.animate(1, function() {
    circle.animate(0);
})

사용자 정의 모양 및 경로:

var container = document.getElementById('example-custom-container');
container.innerHTML = &#39;<object id="scene" type="image/svg+xml" data="images/moon-scene.svg"></object>&#39;;
 
var scene = document.getElementById(&#39;scene&#39;);
scene.addEventListener(&#39;load&#39;, function() {
    var path = new ProgressBar.Path(scene.contentDocument.querySelector(&#39;#asterism-path&#39;), {
        duration: 1000
    });
 
    path.animate(1, function() {
        path.animate(0);
    });
});

ProgressBar.js – 아름다운 반응형 SVG 진행률 표시줄 관련 기사를 더 보려면 PHP 중국어 웹사이트에 주목하세요!