nanobar-轻量级纯js进度条插件

nanobar.js是一款轻量级的纯js进度条插件。这款进度条插件兼容ie8浏览器，它使用简单，并提供一些方法来控制进度条的当前进度。

安装

可以通过bower或npm来安装nanobar.js进度条插件。

$ bower install nanobar
$ npm install nanobar                  
                

使用方法

在页面中引入nanobar.min.js文件。

<script src="path/to/nanobar.min.js"></script>                  
                

初始化插件

可以使用new Nanobar()的方法来生成一个新的进度条实例对象。

var nanobar = new Nanobar( options );
                 

可用的options参数有：

• id：String类型，可选参数。容纳nanobar的div容器的id。
• classname：String类型，可选参数。容纳nanobar的div容器的class。
• target：DOM元素，可选参数。nanobar的目标元素，nanobar会被放置到这个元素的顶部位置。

通过nanobar.go(percentage)方法来移动进度条。

示例代码

var options = {
    classname: 'my-class',
  id: 'my-id',
    target: document.getElementById('myDivId')
};

var nanobar = new Nanobar( options );

//move bar
nanobar.go( 30 ); // size bar 30%
nanobar.go( 76 ); // size bar 76%

// size bar 100% and and finish
nanobar.go(100);                   
                 

CSS样式

Nanobar带有class.bar，它的容器带有class .nanobar。

.nanobar {
  width: 100%;
  height: 4px;
  z-index: 9999;
  top:0
}
.bar {
  width: 0;
  height: 100%;
  transition: height .3s;
  background:#000;
}                   
                 

nanobar进度条插件的github地址为：https://github.com/jacoborus/nanobar