Heim >Web-Frontend >js-Tutorial >ProgressBar.js – Schöner responsiver SVG-Fortschrittsbalken
ProgressBar.js ist ein schöner, reaktionsfähiger Fortschrittsbalkeneffekt, der dynamische SVG-Pfade verwendet. Fortschrittsbalken beliebiger Form können mit ProgressBar.js einfach erstellt werden. Diese JavaScript-Bibliothek bietet mehrere integrierte Formen wie Linien, Kreise und Quadrate, Sie können jedoch mit Illustrator oder einem anderen Vektorgrafik-Editor Ihre eigenen Fortschrittsbalkeneffekte erstellen.
Linienfortschrittsbalken:
var line = new ProgressBar.Line('#example-line-container', { color: '#FCB03C' }); line.animate(1);
Kreisfortschrittsbalken:
var circle = new ProgressBar.Circle('#example-circle-container', { color: '#FCB03C', strokeWidth: 2, fill: '#aaa' }); circle.animate(1, function() { circle.animate(0); })
Benutzerdefinierte Form und Pfad:
var container = document.getElementById('example-custom-container'); container.innerHTML = '<object id="scene" type="image/svg+xml" data="images/moon-scene.svg"></object>'; var scene = document.getElementById('scene'); scene.addEventListener('load', function() { var path = new ProgressBar.Path(scene.contentDocument.querySelector('#asterism-path'), { duration: 1000 }); path.animate(1, function() { path.animate(0); }); });
Weitere Artikel zu ProgressBar.js – schöne responsive SVG-Fortschrittsbalken – finden Sie auf der chinesischen PHP-Website!