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. Ajax基础与Json应用(一）

    一.Ajax概念 Ajax是异步的javacript和xml 发音: Ajax [ˈeɪˌdʒæks] 二.同步与异步 传统方式(同步):一个请求对应一个回应,他们是同步的,回应不完成,没办法对这个页 ...

  2. CSS盒子模型中距离的通俗解释

    设一个有两个div,一大一小,小的div在大的div里面,而小的div和大div直接的距离就叫外边距,用margin.margin-left.margin-right.margin-top.margi ...

  3. 《图说VR》——HTC Vive控制器按键事件解耦使用

    本文章由cartzhang编写,转载请注明出处. 全部权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53915229 作者:car ...

  4. JS实现鼠标经过用户头像显示资料卡的效果，可点击

    基于项目的须要.须要制作出例如以下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料.事实上也就是类似QQclient的那种功能. 网上找了非常多代码,基本都实现了鼠标悬浮之后弹 ...

  5. 【t094】区间运算

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 区间运算是数学的一个领域.在区间运算中,常量和变量并不表示为一个单独.精确的值,而是表示为一个有着上界 ...

  6. Oracle数据库零散知识08 -- 逻辑备份和还原（转）

    一.介绍逻辑备份是指使用工具export将数据对象的结构和数据导出到文件的过程.逻辑恢复是指当数据库对象被误操作而损坏后使用工具import利用备份的文件把数据对象导入到数据库的过程.物理备份即可在数 ...

  7. HDU 1224 Free DIY Tour - 最短路

    传送门 题目大意: 一个有向图(n + 1相当于1),每个点有一个权值(可以认为1和n+1权值为0),求从1走到n+1(相当于走回1)的最大路径权值和是多少,输出方案. 题目分析: 最短路问题,输出方 ...

  8. 【codeforces 791A】Bear and Big Brother

    [题目链接]:http://codeforces.com/contest/791/problem/A [题意] 给你两个数字a和b; a每次乘3,b每次乘2 问你什么时候a第一次大于b [题解] 傻逼 ...

  9. POJ 2418-Hardwood Species（map）

    Hardwood Species Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 18770   Accepted: 740 ...

  10. 微信小程序bnner滚动

    首先是轮播图,autoplay 自动播放,interval 轮播的时间,duration 切换速度,可以根据自己需求去添加. Delete:是删除按钮,加载进来是隐藏的,需用户点轮播图进去后,轮播图全 ...