nprogress.js 头部进度条

引入CSS\JS

<link rel="stylesheet" type="text/css" href="Style/nprogress.css">

<script type="text/javascript" src="JavaScript/nprogress.js"></script>

调用方法：

//开始执行

NProgress.start();

//到40%的位置

NProgress.set(0.4);

//前进一部分

NProgress.inc();

//结束

NProgress.done();

文档手册：http://amazeui.org/1.x/javascript/nprogress/

演示网址：http://ricostacruz.com/nprogress/

nprogress.js 头部进度条使用方法的更多相关文章

  1. 【CSS系列】网页头部进度条方式一

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js 实现进度条功能。

    /** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...

  3. 模仿也是提高，纯css小技巧实现头部进度条

    刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜. 快来感受一下把.(仔细看看头部黄色条的变化) 思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生 ...

  4. Js 百分比进度条

    [构想] CSS3 + JS CSS3控制进度 利用CSS3中的 @keyframes JS实现百分比 根据CSS来调整,时间 [页面代码] 第一种: 默认直接进入就是下载 CSS代码 body { ...

  5. js实现进度条效果

    需求分析: 最近学习javascript客户端脚本语言,学到了两个定时器函数setInterval()和setTimeout(),回想起以前在网页上看到的进度条效果可以使用定时器来实现,所以完成了进度 ...

  6. 拼接html不显示layui进度条解决方法

    最新有个新需求,要异步拼接html并渲染数据,并且我这边是用layui的flow.load(流加载)渲染多个进度条.按官网给出的 element.progress('demo', n+'%'); 就是 ...

  7. js控制进度条到达100%跳转界面一

    进度条一般在手机上用到的比较广泛,刚好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成pc端了,进度条的快慢速度和样式可自行调节,改动也是很方便的,不多说,看代码: <st ...

  8. js实现进度条

    不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. JS实现 进度条 不用控件

    demo1 <html> <head> <title>进度条</title> <style type="text/css"&g ...

随机推荐

  1. js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）

    js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...

  2. Android 比较两个时间段是否有交集或重复

    先看一个例图: 在金山<电池管家>应用中就有一个类似上图这样的功能—— 开启多个定时任务. 当开启另一个定时任务的时候,如果即将开启的这个定时任务的时间段与已经开启了的定时任务的时间段有交 ...

  3. Django + Apache + wsgi配置和环境搭建(ubuntu)

    上一篇写了Django + nginx + uwsgi配置和环境搭建(ubuntu) 由于公司服务器环境问题,又配置了apache的环境.记录例如以下: 一. 安装环境: #apache sudo a ...

  4. Mybatis找不到参数错误：There is no getter for property named 'categoryId' in 'class java.lang.Integer'。

    Mybatis找不到参数错误:There is no getter for property named 'categoryId' in 'class java.lang.Integer'. 错误Li ...

  5. 视频播放MPMoviePlayerController

    视频播放 如何播放视频 iOS提供了MPMoviePlayerController.MPMoviePlayerViewController两个类,可以用来轻松播放视频和网络流媒体\网络音频 提示:网络 ...

  6. 三次握手、四次握手、backlog

    TCP:三次握手.四次握手.backlog及其他   TCP是什么 首先看一下OSI七层模型: 然后数据从应用层发下来,会在每一层都加上头部信息进行封装,然后再发送到数据接收端,这个基本的流程中每个数 ...

  7. java基本数据类型练习

    package javafirst;//包名 public class JavaFirstDay { //基本数据类型的练习 public static void main(String[] args ...

  8. 【rlz000】字串找数

    Time Limit: 3 second Memory Limit: 2 MB 问题描述 输入一个字符串,内有数字和非数字字符.如A123X456Y7A,302ATB567BC,统计共有多少个整数, ...

  9. Static静态变量和非静态变量

    Static静态变量:   不同的对象共享这个变量的存储空间 而不是静态变量   每个对象具有可变的存储器空间 public class StaticDemo { private int count= ...

  10. 跟我学CMD实战系列之二 ——数据压缩备份

    需求:每天下班时,将本地硬盘上的projects目录压缩为rar文件,文件名中必须含有当天日期信息,例如projects_20070902.rar. 分析:1. 压缩可以调用WinRAR的命令行版本r ...