部落格園美化：增加頂部炫彩loading進度條

Shu_HowZ發表於2024-05-18

前言

之前已經出了一篇關於loading動畫的隨筆《部落格園美化：給網頁加上loading動畫》，但是每次載入都必須等loading動畫載入完成才能進行下一步點選，很浪費時間，所以pass掉了......

這次做了一個頂部的loading進度條，載入的同時不影響瀏覽點選網頁，並且進度條顏色十分酷炫（ 非主流 ）的那種。

話不多說，

先上效果圖：

部落格園美化：增加頂部炫彩loading進度條

酷炫吧......😄

頁首HTML程式碼附上：

 1 <script type="text/javascript">
 2         
 3     var loadProcess = function (config) {
 4     var count = 0;
 5     var id = config.id;
 6     var divTxt = "#"+id ;
 7     /*loading進度條樣式*/
 8         $("body").prepend('<div id="' + id + '" style="width: 0%; height:8px; background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);"></div>' );
 9     
10     /*更新進度條*/
11     this.updateProcess = function (percent) {
12     setTimeout(function () { $(divTxt).animate({ width: percent + "%" }) }, ++count * 500);
13     if (percent == 100) {           /*100%就從頁面移除loading標籤*/
14         setTimeout(function () {
15             $(divTxt).hide(500);
16                 setTimeout(function () { $(divTxt).remove() }, 500);
17                 }, count * 500 + 800);
18             }
19         };
20     }
21 </script>
22 <script type="text/javascript">
23     /*需要放在body標籤後面，然後在適當的位置呼叫updateProcess方法*/
24     var p = new loadProcess({"id":"loading"});
25     p.updateProcess(30);
26     p.updateProcess(57);
27     p.updateProcess(60);
28     p.updateProcess(70);
29     p.updateProcess(80);
30     p.updateProcess(100);
31 </script>

相關文章