NProgress显示顶部进度条使用方法

最新推荐文章于 2024-02-19 15:59:27 发布

imHere·

最新推荐文章于 2024-02-19 15:59:27 发布

阅读量4.6k

点赞数 1

分类专栏：工具 JavaScript

本文链接：https://blog.csdn.net/qq_31754523/article/details/96850045

版权

JavaScript 同时被 2 个专栏收录

69 篇文章 4 订阅

订阅专栏

工具

13 篇文章 0 订阅

订阅专栏

1. 官网下载地址：http://ricostacruz.com/nprogress/

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

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

3. 基本用法

NProgress.start(); //显示进度条
NProgress.done(); //完成进度条
NProgress.set(0.4); //设置百分比
NProgress.inc(); //增加一点点

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

<body>
  <script src="nprogress.js"></script>
  <script src="jquery.js"></script>
  <script>
    $(document).ready(function(){
    NProgress.start();
  });
  $(window).load(function(){
    NProgress.done();
  });
  </script>
</body>

5.配置NProgress

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

NProgress.set(0.4);

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

NProgress.configure({minimum:0.3});

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

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

（4）showSpinner：进度环显示隐藏

NProgress.configure({showSpinner: false});

imHere·

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
NProgress显示顶部进度条使用方法

1. 官网下载地址：http://ricostacruz.com/nprogress/2. 引入需要的 nprogress.css 和 nprogress.js 文件<link rel="stylesheet" type="text/css" href="nprogress.css"/><script src="nprogress.js"></scri...
复制链接

扫一扫