進度條/時間倒數

Bootstrap 4 Progress Bar

🔮 此篇文章整理開發專案時，實際遇到的問題與解決辦法

📋 目錄

1. Progress Bar 介紹
2. 套用及客製化調整
3. 進階延伸

Progress Bar 介紹

📅 官網：Bootstrap 4 Progress Bar
Bootstrap 4 自定義進度，只需調整部分參數，即可套用。

官網提供的範例如下：

bootstrap官網提供的範例

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

顯示的進度主要由：aria-valuenow, aria-valuemin, aria-valuemax 去設定。如果要製作動態的進度條，可以動態去改變 aria-valuenow 這個屬性的值。有關樣式及顏色，可以直接用 style 去客製化 Bar的顏色background-color &字的顏色 color 。

套用及客製化調整

筆者實作專案時，情境需要一個動態倒數計時的 Progress Bar。在實作時，參考 Gusti Tammam 的範例，如下：

從 0% 每隔 1 秒長 10%，當進度到達 100% 時，即清除 interval。藉由如此簡潔有力的範例，可以輕易完成動態的進度條。

實作專案情境

需要一個墨綠色的倒數進度條，倒數完會有個重新倒數的機制。

與上面的範例不一樣的是進度條成長的方向，此可以看成灰色以反方向從 0 長到 100，接下來看程式碼 👇

HTML檔案的部分：

非完整index.html檔案

比較特別的部分是 right:-100% ，底色是墨綠，進度則設定成灰色。
搭配的 CSS 檔案，須加上：

.progress{
  -webkit-transform-origin: 0 100%;
  -webkit-transform: rotate(180deg);
  -moz-transform-origin: 0 100%;
  -moz-transform: rotate(180deg);
  -ms-transform-origin: 0 100%;
  -ms-transform: rotate(180deg);
  transform-origin: 0 100%;
  transform: rotate(180deg);
}

上面設訂是為了把進度條轉向。

JS 檔案的部分：

此非完整index.js檔案

其中，把 updated_interval 設定成變數，是方便後續臨時修改執行完整進度條的時間長度。在 refreshTimer 那邊用了 IIFE(立即呼叫函式表達式)，是為了進度條流暢進行。

進階延伸

實作專案時，除了寫好固定一段時間會重新讀取頁面，同時也加上(手動)更新頁面的按鈕。當使用者檢視畫面，想取得實時資料時可以按此按鈕，立即呼叫 API 取得最新的資料。

做此功能，進度條需要跟著做清除 interval 設定，重新倒數。

🍻 Way to go!