插件二之页面加载进度条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 ...
随机推荐
- JavaWeb项目开发案例精粹-第6章报价管理系统-07View层
1. 2.back_index.html <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT= ...
- BS与CS的比较
http://www.oschina.net/news/57811/open-web-not-died?p=2#comments 浏览器是为浏览文档设计的,它的界面布局其实只有从上至下的流布局一种,浏 ...
- guice的基本使用(一)
guice是google一个轻量级的DI注入框架,现在比较强大了,也与目前流行的struts2.jpa等都有集成了. 先看一个例子: package com.ming.user.test; publi ...
- 《Linux内核设计与实现》读书笔记（十二）- 内存管理【转】
转自:http://www.cnblogs.com/wang_yb/archive/2013/05/23/3095907.html 内核的内存使用不像用户空间那样随意,内核的内存出现错误时也只有靠自己 ...
- hdu - 1728逃离迷宫 && hdu - 1175 连连看 (普通bfs)
http://acm.hdu.edu.cn/showproblem.php?pid=1728 这两道题花了一下午的时候调试,因为以前做过类似的题,但是判断方向的方法是错的,一直没发现啊,真无语. 每个 ...
- windows服务删除后，在次安装时无法安装启动。
当我在windows的cmd下卸载evtsys evtsys -u 再次安装时evtsys.exe -i -h 192.168.32.12 -p 514 提示“指定的服务已标记为删除”,进入服务管理 ...
- Unit Test with VS.NET
Unit Test with VS.NET 2014-10-30 定义单元测试框架Visual Studio 2008提供的单元测试框架参考 定义[1] 返回 传统的单元测试:是一段代码(通常一个方法 ...
- Phar文件
phar 扩展名文件提供了一种将整个PHP应用程序打包放入一个被称之为phar(PHP archive)的文件从而更加容易便利地发布和安装的方法.就像是java的jar文件有点类似.除了这个功能外,P ...
- HDU 3951 (博弈) Coin Game
先考虑两种简单的情况: 如果先手能一次把硬币拿完,即 k >= n ,那么先手胜 如果每次只能拿一个硬币, 即 k = 1 ,那么如果有奇数个硬币先手胜,如果有偶数个硬币后手胜. 剩下的情况就是 ...
- HDU 1394 (逆序数) Minimum Inversion Number
原来求逆序数还可以用线段树,涨姿势了. 首先求出原始序列的逆序数,然后递推每一个序列的逆序数. #include <cstdio> #include <cstring> #in ...