插件二之页面加载进度条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 ...
随机推荐
- jq的bind用法
type,[data],function(eventObject)String,Object,Function type: 含有一个或多个事件类型的字符串,由空格分隔多个事件.比如"clic ...
- android-exploitme(三):安全连接
今天我来测试连接的安全,数据是否可嗅探. android模拟器提供了内置的tcpdump,我们使用这个来抓包. 1. 启动带tcpdump的模拟器 santoku@santoku-virtual-ma ...
- linuxlcd驱动程序编写 mini2440(w35)
先说lcd驱动的框架吧! lcd驱动也有自己的框架,如果没有框架,要我们自己完成所有lcd驱动的代码编写那将是很痛苦的一件事. lcd驱动主要依赖于一个文件,fbmem.c 其实它还依赖几个文件 不 ...
- Android Calander Event
必须权限 <uses-permission android:name="android.permission.READ_CALENDAR" /> <uses-pe ...
- ubuntu下启动和关闭tomcat的简单方法
在ubuntu下面,我们安装tomcat可以有两种方式[1]用aptitude安装aptitude install tomcat6 [2]免安装版从apache tomcat 网站下载apache-t ...
- aopalliance.jar —— 下载地址
下载地址:http://sourceforge.net/projects/aopalliance/files/aopalliance/1.0/aopalliance.zip/download TIPS ...
- Spring 异常 —— cvc-elt.1: Cannot find the declaration of element 'beans'
有个使用 Spring 的项目,运行时报错: org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException: Line 5 ...
- 第六篇 ORACLE EBS用户界面通用元素或功能背后的道理解析
本篇打算介绍一下ORACLE EBS用户界面(User Interface)中通用的元素或功能背后蕴含的一些道理.这些通用元素或功能包括: List of Values (LOV),值列表 Flexf ...
- Nginx proxy_pass 加与不加 "/" 区别
下面四种情况分别用http://192.168.1.100/proxy/test.html 进行访问. 第一种: location /proxy/ { proxy_pass http://127.0 ...
- UVa 699 (二叉树) The Falling Leaves
题意: 按先序方式输入一棵二叉树,节点是带权的,左孩子在父节点的左一个单位,右孩子在父节点的右一个单位,从左到右输出相同水平位置节点之和. 分析: 做了好几道二叉树的题,代码应该也很好理解了.这里ma ...