插件二之页面加载进度条pace.js
关于pace.js
pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可
<link rel="stylesheet" href="../themes/pace-theme-center-circle.css" />
<script src="../pace.js"></script>
各样式ie下兼容要求
<!-- <link rel="stylesheet" href="../themes/pace-theme-barber-shop.css" />
barber条状ie8+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-big-counter.css" />
数字型ie9+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-bounce.css" />
落地球ie10+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-center-atom.css" />
花型ie10+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-center-circle.css" />
翻转型ie10+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-center-radar.css" />
雷达型ie10+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-center-simple.css" />
中间条状ie8+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-corner-indicator.css" />
右上角旋转圈ie10+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-fill-left.css" />
全屏幔布ie9+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-flash.css" />
条状+转圈ie10+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-flat-top.css" />
头部扁平条ie8+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-loading-bar.css" />
中间条状+数字百分比ie8+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-mac-osx.css" />
头部动态mac-osx条ie10+ -->
<!-- <link rel="stylesheet" href="../themes/pace-theme-minimal.css" />
头部小号条状 -->
其他
更多详情参考:
http://www.danqingyu.com/145.html
插件二之页面加载进度条pace.js的更多相关文章
- css3 linear-gradient实现页面加载进度条效果
最终效果图: html结构: <div> <p class="p1"> <span></span> < ...
- js页面加载进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue使用nprogress页面加载进度条
vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...
- ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
- jQuery模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
- 网站顶部显示预加载进度条preload.js
网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...
- js页面加载进度条(这个就比较正式了，改改时间就完事儿)
不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...
- 自己写的页面加载进度条jquery插件
(function ($) { var progressId = "progress" + Math.round(Math.random() * 100) var progress ...
- element admin中使用nprogress实现页面加载进度条
主要是知道是nprogress这个组件实现的就可以了,组件的使用方法可参考:https://blog.csdn.net/ltr15036900300/article/details/47321217 ...
随机推荐
- Linux之proc详解
1. /proc目录 Linux内核提供了一种通过/proc文件系统,在运行时访问内核内部数据结构.改变内核设置的机制.proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以 ...
- Spring之在客户端访问RESTful业务
Spring之在客户端访问RESTful业务 RestTemplate 是客户端访问RESTful业务的核心类.在概念上与Spring其他的模板类相似,比如JdbcTemplate和JmsTempla ...
- poj: 3253
这题一开始从大往小考虑是行不通的,这个时候从小到大考虑就很容易了.用一个priority_queue选出两个最小的值加到结果里再推回queue里,直到queue空为止.注意这里res要用long lo ...
- Java安全编码之用户输入
0x00 安全引言 1.传统Web应用与新兴移动应用 (1)传统Web应用:浏览器 HTTP 服务器(2)新兴移动应用:APP HTTP 服务器 从安全角度看,传统Web应用与新兴移动应用没有本质区别 ...
- poj - 1258 Agri-Net (最小生成树)
http://poj.org/problem?id=1258 FJ为了竞选市长,承诺为这个地区的所有农场联网,为了减少花费,希望所需光纤越少越好,给定每两个农场的花费,求出最小花费. 最小生成树. # ...
- PowerDesign不让name和code联动
当name和code一样时,修改name的话,code的值将跟着变动,很不方便.如果能让code不随着name编码就好了. PowerDesign中的选项菜单,在[Tool]-->[Genera ...
- Open_Newtonsoft_Json 的序列化和反序列化
Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库(下载地址http://json.codeplex.com/). 特别注明:本人转自 陈 晨 博客园的 Newtonso ...
- hdu1828(线段树+扫描线)
又知道了线段树的一种用法,除了单点更新,区间更新,还有这种在一段线段上标号但不往下推. 真是神奇 hdu1828 #include <iostream> #include <stdi ...
- gulp some tips
gulp作为替代grunt的task runner后起之秀,基于nodejs的stream操作模型,大大减少了对磁盘的操作因此大大提高了性能. gulp error handling var gulp ...
- 成功的GIT开发分支模型和策略
详细图文并茂以及git flow工具解释参考: http://danielkummer.github.io/git-flow-cheatsheet/index.zh_CN.html 原文地址:http ...