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. [Vue] Dynamic Vue.js Components with the component element

    You can dynamically switch between components in a template by using the reserved <component>  ...

  2. C#趣味程序---个位数为6，且能被3整出的五位数

    using System; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { int ...

  3. 小强的HTML5移动开发之路（45）——汇率计算器【1】

    这两天看了<PhoneGap实战>上面有一个汇率计算器的例子,个人觉得比较好,就拿出来和大家分享一下,在接下来的几篇文章中我们来一起完成这个PhoneGap + Jquery mobile ...

  4. Mybatis中sql语句中的in查询，一定要判断null的情况

    不严谨的写法,可能会报错:in (),这种情况不符合mysql的语法. select from loanwhere LOAN_ID in <foreach item="item&quo ...

  5. Git 常用命令总结（精问）

    Git 常用命令总结(精问) 一.总结 一句话总结:下次尝试做任何git的操作之前,把这个精看精问一遍,绝对会有意向不到的收获. 二.Git 常用命令总结 1.git常用命令 安装及配置: Ubunt ...

  6. 电子商务网站的设计与实现(四)：项目名称malling和一期开发计划

    项目名称:小雷B2C商城系统代号:malling,mall商城的意思,加个ing表示正在进行.更主要的是与"morning"发音很像,非常容易记忆.morning是"早上 ...

  7. KeePass v1.30

    Changes from 1.29 to 1.30: New Features:Refined application icons (thanks to Victor Andreyenkov).Add ...

  8. 手机预览微信小程序

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅 ...

  9. Docker Xshell

    Windows安装Docker Xshell无法连接虚拟机解决方案 DOCKER windows安装 6.1 下载地址 6.2 用FTP工具上传tar包 6.3 安装 6.4 查看镜像 6.5 运行 ...

  10. 云主机CentOS 7新环境命令行搭建node工程步骤

    1.用Node官网提供的命令安装node https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-d ...