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动态获取地址栏后的参数

    原文链接:https://blog.csdn.net/qq_37936542/article/details/78866651 需求:js动态的获取地址栏后面的参数 js代码: alert(GetQu ...

  2. 为什么未来是全栈project师的世界？

    谨以此文献给每个为成为优秀全栈project师奋斗的人. 节选自<Growth: 全栈增长project师指南> 技术在过去的几十年里进步非常快,也将在未来的几十年里发展得更快. 今天技术 ...

  3. MONyog使用图解（一）-数据库性能监控工具

    原文:MONyog使用图解(一)-数据库性能监控工具 一.安装步骤 较为简单,网上可以搜索到,此处不做详细说明. 二.使用图解 此处介绍监控数据库连接量.并发量.吞吐量.响应时间等功能 1.设置连接需 ...

  4. [HTML5] Focus management using CSS, HTML, and JavaScript

    Something important to consider when coding a web application is managing the user's focus. For keyb ...

  5. 谷歌 AI 中国中心成立，人工智能势不可挡？

    昨日,谷歌在上海举办了一年一度的Google中国开发者大会.在本届大会上,谷歌云首席科学家李飞飞宣布了一个重磅消息,即在北京将成立谷歌AI中国中心.对于这个即将成立的AI中心谷歌寄予厚望,希望与中国本 ...

  6. ios tableView那些事

    iOS开发很重要的一个功能就是tableView,可以说熟练使用tableView是iOS开发必修的课程,网上很多相关介绍,推荐一个博客参考一下: http://blog.csdn.net/lengs ...

  7. P2P理财友情提示

    最近2年,P2P理财非常火,但是出现的问题也是越来越频繁. 2014年12月,据说有70多家平台出现了问题,加上以前的,一共有300多家了,出现问题的占总比有20%~30%了. 这个真的是非常的可怕. ...

  8. [GeekBand] 设计模式之观察者模式学习笔记

    本文参考文献::GeekBand课堂内容,授课老师:李建忠 :网络资料: http://blog.csdn.net/hguisu/article/details/7556625 本文仅作为自己的学习笔 ...

  9. sparksql dataset

    java /** *2.0之后使用sparksession即可,不需要再去创建sqlcontext *@author Tele * */ public class Demo { private sta ...

  10. hive 导出数据的几种方式

    1.使用insert导出 这种方式的优点在于既可以导出到hdfs上还可以导出到本地目录 下面以导出emp表中数据为例 insert overwrite local directory "/o ...