插件二之页面加载进度条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 ...
随机推荐
- iOS 开发--NSMutableArray使用枚举方法
可变数组也可以使用枚举方法, 我们在这里提供了两种枚举方法, 一个是正序枚举, 一个是倒序枚举, 在正序枚举中, 元素的个数和顺序都是不可以修改的, 但是在倒序枚举中却可以修改, 这有些耐人寻味. 涉 ...
- Android笔记——PreferenceActivity结合PreferenceFragment创建设置界面
1.创建类继承PreferenceActivity 2.该类必须重写OnBuildHeaders和isValidFragment方法. (1)OnBuildHeaders方法中使用lo ...
- 实践Oracle与DB2区别及问题解决
实践Oracle与DB2区别及问题解决 项目进入开发阶段的时候,为了方便,一直使用Oracle数据库进行开发, 所以很多sql语句都是在oracle能正常创建的,后期由于项目中嵌入了IBM的产品及其他 ...
- Java：内部类(静态内部类、成员内部类、局部内部类、匿名内部类)
Java基础_内部类:在Java中,可以将一个类定义在另一个类里面或者一个方法里面,这样的类称为内部类. 内部类的主要作用:使用内部类可以减少命名冲突. 定义位置:一个内部类可以定义在一个类中,也可以 ...
- awk案例学习
awk是一个强大的文本分析工具,awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各种分析处理.awk语言的最基本功能是在文件或者字符串中基于指定规则浏览和抽取信息,awk抽取 ...
- post提交/文件上传服务器修改
第一步:修改在php5下POST文件大小的限制 1.编修php.ini 找到:max_execution_time = 30 ,这个是每个脚本运行的最长时间,单位秒,修改为: max_exec ...
- Socket 通信原理(Android客户端和服务器以TCP&&UDP方式互通)
转载地址:http://blog.csdn.net/mad1989/article/details/9147661 ZERO.前言 有关通信原理内容是在网上或百科整理得到,代码部分为本人所写,如果不当 ...
- armeabi，armeabi-v7a ，x86 和mips 都是什么？
首先要明白ABI的概念: ABI(Application Binary Interface)实际就是指应用程序基于哪种指令集来进行编译,我们能用到的ABI 也就四种 armeabi,armeabi ...
- Intent Flag介绍 intent.addFlags（）
intent.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION); FLAG_ACTIVITY_BROUGHT_TO_FRONT 这个标志一般不是由程序代码设置的 ...
- hibernate lazy=false annotation设置
工程报错如下: org.hibernate.LazyInitializationException: could not initialize proxy - no Session 解决方法: 在类的 ...