仿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
  }

下载代码

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

C#多线程(二)

   一.多线程的概念    Windows是一个多任务的系统,如果你使用的是windows 2000及其以上版本,你可以通过任务管理器查看当前系统运行的程序和进程。什么是进程呢?当一个程序开始运行时...

background-image:url(data:image/gif;base64,XXXX)

background-image:url(data:image/gif;base64,R0lGODlhCwAMAMZjAElxvlNvtVRxtkp1v0p9wVh7vkqBwl58vml6vml7v...

asp.net页面加载前进度条

  • 2011年04月06日 16:55
  • 3KB
  • 下载

自定义页面加载中效果的进度条

  • 2017年06月02日 18:27
  • 21.42MB
  • 下载

三种方式实现自定义圆形页面加载中效果的进度条

一、通过动画实现定义res/anim/loading.xml如下: 
  • zhou699
  • zhou699
  • 2011年05月27日 14:17
  • 2382

Android 三种方式实现自定义圆形页面加载中效果的进度条

转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一、通过动画实现 定义res/anim/loading.xml如下: ...
  • jdsjlzx
  • jdsjlzx
  • 2015年01月07日 18:37
  • 34964

Android 三种方式实现自定义圆形页面加载中效果的进度条

转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一、通过动画实现 定义res/anim/loading.xm...

android 自定义Dialog页面加载中效果的进度条 Dialog 边角 Dialog 棱角

android 自定义Dialog页面加载中效果的进度条 Dialog 边角 Dialog 棱角

jquery实现进度条无百分比动画loading页面加载特效

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> jquer...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿YouTube页面加载 顶部进度条
举报原因:
原因补充:

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