前端知识点（五）——轻量级nanobar进度条插件的介绍和使用

nanobar.js是一款轻量级的纯js进度条插件。它使用简单，但具有很强大的功能。

1. 下载
   进入GitHub下载 GitHub地址下载

2. 安装
   解压，将nanobar.js复制到工程里面，然后直接引入nanoba.js这个就可以使用了（是不是很方便）！！

   <script src="js/nanobar.js"></script>

   GitHub上也给出了Bower和npm的安装方法，需要可以自己进去看看。

3. 使用
   nanobar进度条默认的位置屏幕顶端，颜色黑色
   通过nanobar.go()移动进度条，移动的长度是0-100，总长度100
   在js里面初始化，并可以设置一些参数

• id：String类型，可选参数。容纳nanobar的div容器的id。

• classname：String类型，可选参数。容纳nanobar的div容器的class。默认class=nanobar

• target：DOM元素，可选参数。nanobar的目标元素，nanobar会被放置到这个元素的顶部位置。不设置就会被放到屏幕顶端。

//进度条设置
var options = {
	//将进度条放在id=Myprogress的div顶部
    target: document.getElementById('Myprogress')
};
//进度条初始化
var nanobar = new Nanobar( options );

//移动进度条
nanobar.go(30)；//移动30%

还可以通过css设置进度条r的样式
默认容纳nanobar的div的class=nanobar，默认容纳移动的进度的div的class=bar

.mydiv .nanobar{
    border: 1px solid 	#DBDBDB;
    border-radius: 7px;
    background: #FAFAFA;
    width: 450px;
    height: 14px;
}
.mydiv .nanobar .bar{
    border-radius: 7px;
    background: #43CD80;
}

效果如下：