仿YouTube页面加载 顶部进度条

原创 2016年08月30日 19:53:46

仿YouTube页面加载 顶部进度条

页面加载时显示顶端进度条效果如下:
效果截图

Pace.js,官网

使用方法

Pace.js会自动加载到页面中,不需要挂接到任何代码,会自动检测进度

在需要显示进度条的页面加入代码如下:

<head>
    <link rel="stylesheet" href="../themes/red/pace-theme-flash.css" />
    <script src="../pace.js"></script>
</head>
也可以根据需求进行自定义配置
 paceOptions = {
  // Disable the 'elements' source
  elements: false,

  // Only show the progress on regular and ajax-y page navigation,
  // not every request
  restartOnRequestAfter: false
  }

下载代码

仿YouTube页面加载 顶部进度条

仿YouTube页面加载 顶部进度条页面加载时显示顶端进度条效果
  • L412400548
  • L412400548
  • 2016年08月30日 19:53
  • 720

Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果)

首句依然是那句老话,你懂得! finddreams :(http://blog.csdn.net/finddreams/article/details/43194799)。 我们都知道在Android...
  • superjunjin
  • superjunjin
  • 2015年03月18日 17:25
  • 12331

js网页顶部线性页面加载进度条,jquery头部线性进度条总结

前言 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式。网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条。 静态效果如下:点击运行可以测试效果! 头部Loa...
  • Esther_Heesch
  • Esther_Heesch
  • 2016年04月12日 16:06
  • 1428

网页顶部加载进度条实现

下面就是简单点实现了这个功能,不同的是进度条颜色不同。 js代码: $({property: 0}).animate({property: 100}, { duration: 5000,/...
  • xiaoshihoukeshuaiL
  • xiaoshihoukeshuaiL
  • 2017年08月30日 11:10
  • 487

Android仿美团加载数据、小人奔跑进度动画对话框(附顺丰快递员奔跑效果)

我们都知道在Android中,常见的动画模式有两种:一种是帧动画(Frame Animation),一种是补间动画(Tween Animation)。帧动画是提供了一种逐帧播放图片的动画方式,播放...
  • jdsjlzx
  • jdsjlzx
  • 2015年02月04日 17:51
  • 15977

仿微信中加载网页时带线行进度条的WebView的实现

finddreams:http://blog.csdn.net/finddreams/article/details/44172639  为了仿微信中加载网页时带进度条的WebView的实现,首先我们...
  • jdsjlzx
  • jdsjlzx
  • 2015年03月10日 22:57
  • 10287

网页顶部加载进度条(真实加载进度)

没有真实测试         {     function getElementsByClass(key){     var arr = new Array();     var ta...
  • FYWT98
  • FYWT98
  • 2017年07月10日 09:07
  • 292

自定义控件之仿知乎进度条

自定义控件系列开始连载了,今天我们要做的是知乎的进度条的效果,先上图                                  刚开始不太会做动态图,自己截了几张图合在一起,看起来会比...
  • u013926110
  • u013926110
  • 2015年07月23日 16:54
  • 729

Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果)

首句依然是那句老话,你懂得! finddreams :(http://blog.csdn.net/finddreams/article/details/43194799)。 我们都知道在Androi...
  • pengpenggxp
  • pengpenggxp
  • 2015年08月13日 17:50
  • 4973

Android用RecyclerView练手仿美团分类界面

转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/52997986 【DylanAndroid的csdn博客】 RecyclerV...
  • u010785585
  • u010785585
  • 2016年11月02日 09:02
  • 5168
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿YouTube页面加载 顶部进度条
举报原因:
原因补充:

(最多只允许输入30个字)