[前端] 無須寫程式,簡易實現Youtube網頁頂部progressBar進度條的JS套件 Pace

Youtube like Progress Bar Pace 

前言

Pace是一款簡單,只要引用兩個檔案無須寫Code,即可自動為網頁加上progressBar進度條

各式各樣進度條請見官網Demo

連Youtube、Google Calendar網頁頂部的進度條也有支援(Pace稱之為Minimal)

※不過得留意這種進度條並沒有block畫面的效果,進度條在跑時,使用者仍然可以點擊畫面上其他按鈕操作

實作

第一步先到官網下載ZIP解壓縮

接著把以下pace.js和themes資料夾複製到自己的Web專案

網頁引用兩個檔案就行(Pace不依賴jQuery)

 <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo Pace.js</title>
    <!--官網建議js放在<head>裡,我猜是為了提早出現進度條,就照著官網建議吧-->
    <!--引用Pace theme CSS--> 
    <link href="~/Content/themes/red/pace-theme-minimal.css" rel="stylesheet" />
    <!--引用Pace.js-->
    <script src="~/Content/pace.js"></script> 
</head>
<body> 
</body>
</html>

仿照Youtube的進度條就完成了,超簡單~

如果想更換進度條樣式長相,只要換掉CSS即可

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo Pace.js</title>
 
    <!--引用Pace theme CSS loading bar-->  
    <link href="~/Content/themes/blue/pace-theme-loading-bar.css" rel="stylesheet" />
    <!--引用Pace.js-->
    <script src="~/Content/pace.js"></script> 
</head>

預設觸發Pace進度條為以下發生...

所以如果在ASP.net MVC的Controller裡執行Server端長時間的處理程序,例如↓

   public ActionResult Index()
        { 
            Thread.Sleep(5000);//花很長時間
            return View();
        }
         

這樣不會出現進度條,只會看著網頁經過漫長等待後,網頁迅速載完DOM元素,然後進度條一下子就跑完了

相關文章

How to Create a JavaScript Progress Bar With Pace.js

pace.js頁面加載進度條插件

pace.js – 网页自动加载进度条插件