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