因為剛好有用到這個效果順便整理一下。



頁面資料多到要花時間讀取時，有時候第一秒點進去就會先看到缺圖、缺字、缺東缺西的問題，第一印象瀏覽的觀感上不是太好，所以為了讓使用者操作的流暢度更好，在頁面讀取完成前顯示這個loading bar，可以提醒使用者網頁正在讀取中，也可以避免第一時間進網頁就破圖不好看又無法順暢操作的問題。

不過找了半天覺得網路上教學文都沒有很清楚，自己寫一篇來筆記一下好了。
我先找到一個超棒的套件叫：「Spin.js」。


Spin.js這套件可以非常自由的設定你想要顯示的讀取條樣式（幾乎你看過的圓形讀取條都可以做出來），也提供了JS套件下載。我特別在CodePen把我自己用法紀錄起來，本來想直接貼在這裡的，可是貼在這似乎圓形讀取條沒辦法正常顯示，所以請直接到CodePen去看效果。

註解我也全用英文寫在裡面了




點進去可以看到的code如下圖。最後強迫症發作還是特別做了圖說明一下這些區塊的用意：





至於讀取順序的問題，chrome會先讀取html本身的code再來讀取其他link，
所以擺放的順序是有用意的。查了一下資料發現chrome的開發者工具裡的「Network」有非常清楚的列表可以看chrome在讀取的時候先後load了哪些檔案，甚至是讀取花了多少時間，對網頁開發蠻有幫助的，請鄉親朋友多加利用Q_Q