网站加载进度指示插件topbar.js

 查看演示  website  立即下载

topbar

发布时间:2018-1-5 0:22

网站加载进度指示有以下特点:

• 极小的 (1KB 缩小和压缩), 没有依赖性

• 适合单页应用程序

• 响应

用法

安装

下载 topbar.js 或 topbar.min.js, 并将其包含在页面中。

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

基础用法

调用topbar.show()来显示度条,topbar.hide()来隐藏进度条。 在调用topbar.hide()之前，进度条会移动得越来越慢，但实际上并没有达到100％。 大多数时候，这2种方法都是你需要的。

$('#btnStartSimple').click(function() {
  topbar.show()//显示度条
})

$('#btnStopSimple').click(function() {
  topbar.hide()//隐藏度条
})

高级

使用topbar.config(options)自定义顶栏。

• autoRun (default: true)：如果为false，则手动调用topbar.progress（）来运行。

• barThickness (default: 3)：进度条粗细。

• barColors：用于绘制进度条的渐变色停止列表。

• shadowBlur (default: 10)：阴影模糊。

• shadowColor：阴影颜色。

注意：topbar.progress() 可以带一个数字或字符串值。 如果字符串，你可以使用+或 - 来改变相对于当前位置的进度。 如果没有指定参数，则返回当前进度（0到1）。

PREVIOUS:
NEXT:
弹幕视频（仿bilibili）
jQuery可编辑表格