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

Shu_HowZ發表於2024-05-18

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

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

話不多說,先上效果圖:

image

酷炫吧......😄

頁首HTML程式碼附上:

 1 <script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
 2 <script type="text/javascript">
 3         
 4     var loadProcess = function (config) {
 5     var count = 0;
 6     var id = config.id;
 7     var divTxt = "#"+id ;
 8         $("body").prepend('<div id="' + id + '" style="width: 0%; height:5px; 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 
22 </script>
23 
24 <script type="text/javascript">
25     
26     /*需要放在body標籤後面,然後在適當的位置呼叫updateProcess方法*/
27     var p = new loadProcess({"id":"loading"});
28     p.updateProcess(30);
29     p.updateProcess(57);
30     p.updateProcess(60);
31     p.updateProcess(70);
32     p.updateProcess(80);
33     p.updateProcess(100);
34 </script>

相關文章