nanobar.js是一款轻量级的纯js进度条插件。它使用简单,但具有很强大的功能。
-
下载
进入GitHub下载 GitHub地址下载 -
安装
解压,将nanobar.js复制到工程里面,然后直接引入nanoba.js这个就可以使用了(是不是很方便)!!<script src="js/nanobar.js"></script>
GitHub上也给出了Bower和npm的安装方法,需要可以自己进去看看。
-
使用
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;
}
效果如下: