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

ProgressBar.js 是一个借助动态 SVG 路径的漂亮的，响应式的进度条效果。使用 ProgressBar.js 可以很容易地创建任意形状的进度条。这个 JavaScript 库提供线条，圆形和方形等几个内置的形状，但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果。

 

 

在线演示      插件下载

 

线条进度条：

1 2 3 4 5

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

圆形进度条：

1 2 3 4 5 6 7 8 9

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

自定义形状和路径：

1 2 3 4 5 6 7 8 9 10 11 12 13

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);      }); });

转载于:https://www.cnblogs.com/sunshinelaila/p/4119367.html