插件二之页面加载进度条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 ...
随机推荐
- CentOS系统安装JDK
使用yum安装 1.查看yum库是否有java安装包 yum -y list java* 2.安装jdk yum -y install java-1.8* 3.安装完成后,执行java -versi ...
- Spring笔记——依赖注入
依赖注入有三种方式: 1. 使用构造器注入 2. 使用属性setter方法注入 3. 使用Field注入(用于注解方式) 注入依赖对象可以采用手工装配或自动装配,在实际应用中建议使用手工装配,因为自 ...
- TopologyBuilder
创建并提交Topology到Storm集群的完整代码 //创建TopologyBuilder对象 TopologyBuilder builder=new TopologyBuilder(); //添加 ...
- /dev/tty /dev/ttyS0 /dev/tty0,/dev/null区别
1./dev/tty表示控制终端如果当前进程有控制终端(Controlling Terminal)的话,那么/dev/tty就是当前进程的控制终端的设备特殊文件.可以使用命令”ps –ax”来查看进程 ...
- 使用 .gitignore来忽略某些文件【转】
转自:http://www.cnblogs.com/shangdawei/archive/2012/09/08/2676493.htmlhttp://blog.csdn.net/richardyste ...
- leetcode：String to Integer (atoi)
Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...
- 谈谈 char *num="123";和char num[4]="123";的区别
最近写程序的时候发现这样一个问题 #include<iostream> #include <string.h> using namespace std; void revers ...
- CodeForces 378C Maze (DFS)
题目链接 题意:给一个由“.”组成的联通区域,求再添加k个‘#'以后还是联通区域的方案. 分析:做题的时候犯二了,用DFS,一直搜到边缘,然后从边缘依次往回 回溯,回溯的过程中填充’#‘ 一直填充k个 ...
- 如何使用adb命令查看android中的数据库
1,进入到控制台中,输入adb shell,进入到命令模式的环境中 2,输入:cd /data/data/ 3, 选择你所在的数据库文件,比如我的com.android.homework, 输入命令: ...
- CSS控制超链接
一.伪类 CSS控制元素的某种状态---偽类(用于向某些选择器添加特殊的效果) 偽类的语法:元素标签 偽类名称{属性:属性值;} 二.超链接 a:link:未访问的链接 ...