首页 瞎折腾

效果:

请输入图片描述

ps:本站已经应用,可以直接看效果,试着点导航栏的页面或者文章页都是有的哈

1.下载

官网下载地址:https://ricostacruz.com/nprogress/

GitHub项目地址:https://github.com/rstacruz/nprogress/

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

NProgress

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

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

NProgress.start();
NProgress.done();

可以通过调用 .set(n)来设置进度,n是0-1的数字。

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

可以使用inc()随机增长进度条。

NProgress.inc();

通过使用done()让进度条关闭。

NProgress.done(true);

Pjax

$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end',   function() { NProgress.done();  });



文章评论

    VaeWhite 访客ChromeWindows
    2021-03-2 12:12   回复

    万水千山总是情,我也搬运行不行

      Cat 站长ChromeWindows
      2021-03-2 13:38   回复

      随意

    Quiet 访客ChromeWindows
    2020-10-23 15:10   回复

    就这?我也直接搬运

      Cat 站长ChromeWindows
      2020-10-23 15:19   回复

      淦你

    pilgrimage 访客ChromeWindows
    2020-10-11 19:20   回复

    就这?我直接搬运

      Cat 站长ChromeWindows
      2020-10-11 19:21   回复

      球球你自己写吧

        pilgrimage 访客ChromeWindows
        2020-10-11 19:22   回复

        球球是谁,我不认识

          Cat 站长ChromeWindows
          2020-10-11 19:23   回复

    heson 访客ChromeWindows
    2020-10-11 14:46   回复

目录