ithub Star: 26k[1] 官網[2]

NProgress 是什么？

NProgress.js 是一個輕量級的 JavaScript 庫，用于在應用的頁面頂部顯示一個進度條，指示頁面加載或異步操作的進度。它非常適合用于單頁面應用程序（SPA），能夠在路由變化時給用戶友好的加載提示。本文是 NProgress.js 的基本使用方法和一些配置選項的詳細介紹。

快速開始

安裝和引入

NProgress.js 支持管理工具 npm 或 yarn 安裝，也支持 CDN 引入。

npm install nprogress -S
#
yarn add nprogress

引入時，別忘了引入 nprogress.css 樣式文件

啟動和結束進度條

NProgress.start(); // 啟動進度條
NProgress.done(); // 結束進度條

設置進度

NProgress.set(0.4); // 設置進度至 40%

設置進度百分比，參數取值 0 ~ 1 之間。如果傳 0 類似于調用 .start()，傳 1 類似于調用 .done() 方法。

遞增進度條

NProgress.inc(); // 隨機遞增進度條
NProgress.inc(0.2); // 以 0.2 的值遞增進度條

遞增進度條，以隨機量增加，永遠不會到達 100%。

配置選項

NProgress.configure({
  easing: 'ease', // 動畫方式
  speed: 500, // 遞增進度條的速度
  showSpinner: false, // 是否顯示加載指示器
  trickle: false, // 是否開啟自動遞增行為
  trickleSpeed: 200, // 自動遞增間隔
  minimum: 0.3, // 更改啟動時使用的最小百分比
  parent: 'body', // 指定進度條的父容器
  barSelector: '[role="bar"]', // 進度條選擇器
  spinnerSelector: '[role="spinner"]' // 加載指示器選擇器
});

配置項還有 template 自定義模板，為了保證正常工作，需要保留一個帶 role='bar' 的元素。參考默認模板。

NProgress.configure({
    template: `
    <div class="bar" role="bar">
      <div class="peg"></div>
    </div>
    <div class="spinner" role="spinner">
      <div class="spinner-icon"></div>
    </div>`
})

另外，通過覆蓋 nprogress.css 樣式，可以實現定制化樣式。

在 Vue 中使用

在 Vue 項目中，可以將 NProgress.js 集成到路由系統中，方便頁面跳轉時顯示進度條。在 router/index.js 中引入 NProgress 并在路由衛士中調用相應的 API。

import NProgress  from 'nprogress'
import 'nprogress/nprogress.css'
// 導入進度條
import { start, close } from '../utils/nprogress';
const router=new VueRouter({
  // ...
});
router.beforeEach((to, from, next)=> {
  NProgress.start();
  next();
});
router.afterEach(()=> {
  NProgress.done();
});

修改進度條樣式

通過添加 CSS 樣式來自定義進度條的顏色和其他視覺效果。

#nprogress .bar {
  background: green !important; /* 自定義顏色 */
}

總結

NProgress.js 使用一種簡單的方式來改善用戶體驗，在單頁應用中，通過在頁面跳轉期間顯示進度條，可以讓用戶知道頁面正在加載，從而減少用戶的等待焦慮感。通過本文相信你已經能夠在項目中輕松使用 NProgress.js 了。

祝好！

引用鏈接

[1] Github Star: 26k: https://github.com/rstacruz/nprogress
[2] 官網: https://ricostacruz.com/nprogress/

/*彈球(箭頭)*/

.qieban{animation: bounce-up 1.4s linear infinite; }

、Html

<div class="numCount">
  <span class="numCX" data-startVal="0" data-endVal="363567" 
  data-speed="4" data-decimals="0" id="mumC1">363567</span>
</div>

2、Js關鍵code

<script src="js/count.js"></script>
 <script type="text/javascript">
    $(function(){
        var countCXArr=[];
        var countCX=function (){
            // ***外圍盒子需要有numCount這個class，執行動畫的子元素class為【numCX】，該元素必須有id**
            $('.numCount').each(function(i, dom) {
                if(countCXArr[i] && countCXArr[i]===true){
                    return;
                }
                var sT;
                var ncTop;
                sT=$(window).scrollTop();
                ncTop=$(dom).offset().top;
                var id,decimals, startVal, endVal, duration; 
                if (sT > ncTop-$(window).height() && sT < ncTop) {
                    $(dom).find('.numCX').each(function(){
                        id=$(this).attr('id');//id在這里運用
                        decimals=$(this).attr('data-decimals'),
                        startVal=$(this).attr('data-startVal'),
                        endVal=$(this).attr('data-endVal'),
                        duration=$(this).attr('data-speed'); 
                        new CountUp(id, startVal, endVal, decimals, duration, {
                            useEasing: true,//效果
                            separator: ''//數字分隔符
                        }).start();// target：目標元素id, startVal：你想要開始的值, endVal：你想要到達的值, decimals：小數位數，默認值為0, duration：動畫持續時間為秒，默認值為2, options：選項的可選對象
                        countCXArr[i]=true;
                    })         
                }
            }) 
        }
        countCX();	
        $(window).on("scroll",function() {
            countCX();	
        })	
    });
  </script>

關于countjs插件