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

所属分类:UI-加载

 3238  52  查看评论 (5)
网站加载进度指示插件topbar.js ie兼容9

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

相关插件-加载

jquery图片加载进度

图片异步加载进度表条
  加载
 23161  93

创造性的负载效应

13种页面加载特效
  加载
 4377  43

纯css3制作绿色loading加载动画特效

纯css3制作绿色loading加载动画特效里面包含14款不同效果的绿色清新loading加载特效。
  加载
 16932  159

jQuery动画进度条 实时显示进度百分比DEMO演示

jQuery动画进度条 实时显示进度百分比DEMO演示
  加载
 12293  41

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币

    依然饭特稀 0
    2018/1/16 9:13:07

    要把prettify.min.js这个JS也放进去才会显示。。。

    回复
    T 0
    2018/1/11 10:16:44

    大佬你这个怎么控制进度条的速度,也就是显示时间的长短!

        西瓜0
        2018/1/18 0:49:16

        速度是由网页加载速度决定的。

    回复
    大宝 0
    2018/1/6 14:41:09

    学习了 感谢!~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    回复
    那一瞬.................. 0
    2018/1/5 9:38:56
    这个可以的    很666    收藏了   感谢楼主分享 回复
取消回复