极其轻巧的进度条（约699字节压缩后）。

兼容性：IE7及以上版本及全球其他浏览器

演示

请参阅 nanobar.jacoborus.codes

安装

下载并解压 最新发布版，或者通过包管理器安装：

Bower：

$ bower install nanobar

npm：

$ npm install nanobar

使用

引入

从HTML文件中链接 nanobar.js

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

或要求引入：

var Nanobar = require('路径/to/nanobar');

创建进度条

var nanobar = new Nanobar( 选项 );

选项

• id <字符串>：（可选）用于nanobar div 的 ID。
• classname <字符串>：（可选）用于nanobar div 的 CSS 类名。
• target <DOM 元素>：（可选）放置进度条的位置，默认情况下，如果未指定target，则nanobar会固定在文档顶部。

移动进度条

使用 nanobar.go(百分比) 调整进度条大小。

参数

• 百分比 <数字> ：nanobar宽度的百分比。

示例

创建进度条

var 选项 = {
   classname: '我的类名',
   id: '我的ID',
   target: document.getElementById('我的divID')
};

var nanobar = new Nanobar( 选项 );

//移动进度条
nanobar.go( 30 ); // 将进度条设为30%
nanobar.go( 76 ); // 将进度条设为76%

//将进度条设为100%，并完成任务
nanobar.go(100);

自定义进度条样式

Nanobar会在您的HTML头部注入一个样式标签。进度条的div具有.bar类，其容器具有.nanobar类，因此您可以覆盖这些默认值以适应自定义需求。

默认CSS：

.nanobar {
  width: 100%;
  height: 4px;
  z-index: 9999;
  position: absolute;
  top:0;
}

.bar {
  width: 0;
  height: 100%;
  transition: width .3s ease-in-out;
  background-color:#000;
}

希望这能激发您的创意！

---

---

版权所有 © 2016 jacoborus - 发布于 MIT 许可证 下。