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. listener监听器笔记

    listener:三个域对象的监听器,,还有属性的变化. 监听三个域对象的创建和销毁:servletContextListenerservletRequestListenerservletsessio ...

  2. Haproxy解析

    简单介绍 HAProxy是一款提供高可用性.负载均衡以及基于TCP和HTTP应用的代理软件,HAProxy是全然免费的.借助HAProxy能够高速而且可靠的提供基于TCP和HTTP应用的代理解决方式. ...

  3. [NPM] Run npm scripts with git hooks

    In this lesson we will look about how we can integrate with git hooks to help enforce a certain leve ...

  4. js进阶 10-6 jquery中的属性选择器有哪些

    js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...

  5. 【codeforces 776A】A Serial Killer

    [题目链接]:http://codeforces.com/contest/776/problem/A [题意] 这个杀手每天会除掉一个人; 这个杀手每天都有两个目标; 给你它杀人的日志,以及这个人被杀 ...

  6. 【ORACLE】spfile失落的处理

    ************************************************************************ ****原文:blog.csdn.net/clark_ ...

  7. 人生不过一个字【Life is but a word】

    有人说,人生是一出悲悲喜喜的戏,是一首飘飘忽忽的歌,是一次上去又下来的登山运动,是一场明明灭灭的烟花……是的,有道理,但听起来,太玄虚:悟起来,太深远:做起来,太复杂.              我说 ...

  8. Linux下Qt5.6 Fcitx无法输入中文输入解决办法

    Qt5.6的解决办法和之前的版本有点不同,方法如下:首先安装 fcitx-frontend-qt5.然后执行: 123 sudo cp /usr/lib/x86_64-linux-gnu/qt5/pl ...

  9. servlet-显示器

    1.什么是监听器 监听器是实现一个特定的接口java规划,该计划的目的是还调用类方法监听器.java的awt大量使用该模式,如的能力button点击事件.当鼠标点击时,就会调用事件处理程序.又如:在j ...

  10. Qt5.9 官方发布的新版本亮点的确不胜枚举（而且修复2000+ bugs）

    作者:Summer Fang链接:https://www.zhihu.com/question/60486611/answer/177584284来源:知乎著作权归作者所有.商业转载请联系作者获得授权 ...