Rumah >hujung hadapan web >tutorial js >ProgressBar.js – 漂亮的响应式 SVG 进度条

ProgressBar.js – 漂亮的响应式 SVG 进度条

高洛峰
高洛峰asal
2016-12-16 16:35:351729semak imbas

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中文网!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn