nanobar.js 轻量级进度条插件 - 文章教程

nanobar.js 轻量级进度条插件

发布于 2020-05-25 字数 1717 浏览 1456 评论 0

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

nanobar.js 轻量级进度条插件

简单示例

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);

安装

bower install nanobar
//or
npm install nanobar

或者到 Github 地址下载最新版

使用方法

引入 nanobar.js 文件

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

或者 require 引入:

var Nanobar = require('path/to/nanobar')

创建进度条

var nanobar = new Nanobar( options );

可选参数

  • id <String>: 要使用进度条的元素 ID。
  • classname <String>: 要使用进度条的元素 Class。
  • target <DOM Element>: 可选,要在哪儿显示进度条,默认情况下是绝对定位到浏览器顶部。

移动进度条

移动进度条进度可以使用这个方法 nanobar.go(percentage)

参数:

  • percentage <Number> : 进度条的进度

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3