android progressbar 不显示_Web页面中进度条的实现——Progressbar.js

介绍

使用ProgressBar.js，可以轻松地为Web创建响应式和时尚的进度栏。即使在移动设备上动画效果也表现良好。它提供了一些内置形状，如“直线”，“圆”和“半圆”，但是你也可以使用任何矢量图形编辑器创建自定义形状的进度条。ProgressBar.js是轻量级的，MIT开源许可，并支持包括IE9 +在内的所有主要浏览器。

---

---

Github

---

https://github.com/kimmobrunfeldt/progressbar.js

用法

以下是最简单的一个实例，从0大100%的进度条显示

var ProgressBar = require('progressbar.js');// HTMLvar bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});bar.animate(1); // Value from 0.0 to 1.0

以下是线、圆、半圆以及自定义形状的效果图，可以直接到文档查看动态的效果

---

---

---

安装

bower install progressbar.js//ornpm install progressbar.js

• CommonJS

var ProgressBar = require('progressbar.js')var line = new ProgressBar.Line('#container');

1. AMD

require.config({ paths: {'progressbar': '../bower_components/progressbar.js/dist/progressbar'}});define(['progressbar'], function(ProgressBar) { var line = new ProgressBar.Line('#container');});

• Global variable

// If you aren't using any module loader, progressbar.js exposes// global variable: window.ProgressBarvar line = new ProgressBar.Line('#container');

var circle = new ProgressBar.Circle('#example-percent-container', { color: '#FCB03C', strokeWidth: 3, trailWidth: 1, text: { value: '0' }});

React组件

https://github.com/kimmobrunfeldt/react-progressbar.js

总结

在常见的Web开发中经常看到有些地方需要进度条显示或者类似的需求，如果你的项目并不是很庞大，但有些时候又不需要一些第三方框架的时候就可以使用这些独立的库来完成你想要的功能！