NProgress显示顶部进度条效果及使用详解

NProgress实现显示加载进度条效果，具有逼真的动画涓涓细流来说服你的用户，无页面跳转效果 ，极大提高用户体验效果

1. 官网下载地址

实现效果如下GIF图片所示：（请求的数据比较小，所以跑得比较快，可以开发者工具Network设置为3G以下网速看得更清晰点）

2. 引入需要的 nprogress.css 和 nprogress.js 文件

<link rel="stylesheet" type="text/css" href="nprogress.css" rel="external nofollow" />
<script src="nprogress.js"></script>

3. 基本用法：只需要调用NProgress的 start() 和 done() 的API来控制进度条

NProgress最重要两个API就是start()和done()，基本一般用这两个就足够了。
·
NProgress.start(); //显示进度条
NProgress.done(); //完成进度条
·

下面结合ajax的ajaxStart()和ajaxStop()全局事件代码实现加载效果。

<body>
 <button id="btn">请求</button>
 <script src="nprogress.js"></script>
 <script src="jquery.js"></script>
 <script>
 $(document)
  .ajaxStart(function () {
  //请求开始了
 NProgress.start();
  })
  .ajaxStop(function () {
 //请求结束了
 NProgress.done();
  })
 $('#btn').on('click', function () {
  $.get('time.php')
 })
 </script>
</body>

实现效果：（GIF）

4. NProgress 其他高级用法

（1）百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。

NProgress.set(0.0);
NProgress.set(0.4);
NProgress.set(1.0);

（2）递增：要让进度条增加，只要调用 .inc()。这会产生一个随机增量，但不会让进度条达到100%。此函数适用于图片加载或其他类似的文件加载。

NProgress.inc();

（3）强制完成：通过传递 true 参数给done()，使进度条满格，即使它没有被显示。

NProgress.done(true);

5. NProgress 其他配置

（1）minimum：设置最低百分比

NProgress.configure({minimum:0.1});

（2）template：改变进度条的HTML结构。为保证进度条能正常工作，需要元素拥有role='bar'属性。

NProgress.configure({
 template:"<div class='....'>...</div>"
});

（3）ease：调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（单位ms）。

NProgress.configure({ease:'ease',speed:500});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery插件NProgress.js制作网页加载进度条

    NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Google, YouTube, 和 Medium 提供灵感. 安装 依赖于 jQuery (1.8版本及以上),添加 np

  • 在vue项目中使用Nprogress.js进度条的方法

    NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入 在main.js中引入要使用的npro

  • NProgress显示顶部进度条效果及使用详解

    NProgress显示顶部进度条效果及使用详解

    NProgress实现显示加载进度条效果,具有逼真的动画涓涓细流来说服你的用户,无页面跳转效果 ,极大提高用户体验效果 1. 官网下载地址 实现效果如下GIF图片所示:(请求的数据比较小,所以跑得比较快,可以开发者工具Network设置为3G以下网速看得更清晰点) 2. 引入需要的 nprogress.css 和 nprogress.js 文件 <link rel="stylesheet" type="text/css" href="nprogres

  • jQuery实现页面顶部显示的进度条效果完整实例

    本文实例讲述了jQuery实现页面顶部显示的进度条效果.分享给大家供大家参考,具体如下: 具体代码如下: <!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> </head> <body> <di

  • C语言进度条的实现原理详解

    C语言进度条的实现原理详解

    目录 \r和\n 行缓冲区 进度条 \r和\n 在程序里面,\r和\n分别代表什么意思? \r:表示“回车”,即回到当前行的起始位置 \n:表示换行,即列不变,另其一个新行 行缓冲区 什么是行缓冲区?先别慌,来看代码一执行会是什么样的状态. //代码一,mytest.c文件 # include <stdio.h> int main(void) { printf("hello linux"); sleep(1); return 0; } 现象:光标休息一秒后,打印出hello

  • Python进度条tqdm的用法详解

    Python进度条tqdm的用法详解

    前言 有时候在使用Python处理比较耗时操作的时候,为了便于观察处理进度,这时候就需要通过进度条将处理情况进行可视化展示,以便我们能够及时了解情况.这对于第三方库非常丰富的Python来说,想要实现这一功能并不是什么难事. tqdm就能非常完美的支持和解决这些问题,可以实时输出处理进度而且占用的CPU资源非常少,支持windows.Linux.mac等系统,支持循环处理.多进程.递归处理.还可以结合linux的命令来查看处理情况,等进度展示. 大家先看看tqdm的进度条效果: tqdm安装:

  • Android实现标题上显示隐藏进度条效果

    Android实现标题上显示隐藏进度条效果

    一个界面,实现在向页面添加图片时,在标题上显示一个水平进度条,当图片载入完毕后,隐藏进度条并显示图片 具体实现方法: res/layout/main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"

  • Jquery Easyui进度条组件Progress使用详解（8）

    Jquery Easyui进度条组件Progress使用详解（8）

    本文实例为大家分享了Jquery Easyui进度条组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <div class="easyui-progressbar" data-options="value:60" style="width:400px;"> </div> JS调用加载 <div id="box" style="width: 400px;">

  • Android编程自定义进度条颜色的方法详解

    Android编程自定义进度条颜色的方法详解

    本文实例讲述了Android编程自定义进度条颜色的方法.分享给大家供大家参考,具体如下: 先看效果图: 老是提些各种需求问题,我觉得系统默认的颜色挺好的,但是Pk不过,谁叫我们不是需求人员呢,改吧! 这个没法了只能看源码了,还好下载了源码, sources\base\core\res\res\ 下应有尽有,修改进度条颜色只能找progress ,因为是改变样式,首先找styles.xml 找到xml后,进去找到: <style name="Widget.ProgressBar"&

  • vue视频时间进度条组件使用方法详解

    vue视频时间进度条组件使用方法详解

    本文实例为大家分享了vue视频时间进度条组件的使用方法,供大家参考,具体内容如下 有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件 实现思路: 1.24h的时间刻度线总宽度为12960px2.点击24h线的某一点,获取这一点离左侧原点的距离(使用dom元素layerX和offsetLeft综合判断)3.计算点击时线段的占比比率4.每天的时间是86400000毫秒5.占比比率乘以86400000就是获取的你点击的时间 代码如下: <template>   <d

  • vue配置nprogress实现页面顶部进度条

    vue配置nprogress实现页面顶部进度条

    本文实例为大家分享了vue配置nprogress实现页面顶部进度条的具体代码,供大家参考,具体内容如下 1. 安装 npm install nprogress --save 2. 在main.js中导入 源码~~~~~~方便你复制 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an a

  • struts2实现文件上传显示进度条效果

    一. struts2读取进度原理分析(作为草稿存了好久,刚刚发布出来......) 1. 在strut2中控制文件上传信息的类是实现MultiPartRequest接口的JakartaMultiPartRequest 其实第一次看到源文件时我打了个退堂鼓,因为觉得内容太长了,不想看.冷静下来将思路理顺,将分开的各个方法还原到一个方方中中,发现还是很好理解的: @Override public void parse(HttpServletRequest request, String saveDi

随机推荐