在開發 Hybrid APP 時，由於 Hybrid APP 的載入及頁面切換均不及 Native APP，會出現時間較長的空白頁，這十分影響 APP 的體驗，因此運用載入動畫就成為改善體驗的重要方法，而 Loader.CSS，僅用 CSS 樣式就能實現一個載入動畫效果。

介紹

Loaders.CSS是一個完全由CSS撰寫的各種載入動畫合集，不需要任何的背景或者圖片，而且執行流暢，擁有多種不同風格和方式的動畫效果，極具創意的Loading載入動畫合集。

Loaders.CSS 是一個為效能優化的實現載入動畫效果的 CSS 框架，一個完全由CSS編寫的載入動畫集合，使用CSS屬性避免浪費多餘的計算和繪畫。

使用

1. 引入 loaders.min.css 和 loaders.css.js，這個 JS 僅是為了簡化動畫的 DIV 標籤，如果不加這個 JS，那麼你的動畫就必須加上對應數量 DIV 標籤才能正常顯示動畫，所以建議加上，這樣語義化好會好些。

   <link rel="stylesheet" type="text/css" href="loaders.min.css">
   <script type="text/javascript" src="loaders.css.js"></script>

2. HTML 程式碼，給 loading 元素加入動畫 class ，如下：

   <div id="loading" class="loader-inner ball-pulse"></div>

3. 此外你還要可以為 loading 動畫加上顏色(載入動畫預設為白色)，程式碼如下：

   .ball-grid-pulse > div {
   background: orange;
   }

4. 最後動畫的淡入淡出可以配合 JQuery 來實現：

   //淡入
   jQuery(".loading").addClass("loader-chanage");
   jQuery(".loading").fadeOut();//jQuery(".loading").fadeOut(500); 可控制時間，單位為 ms，下同
    
   
   //淡出
   jQuery(".loading").addClass("loader-chanage");
   jQuery(".loading").fadeIn();

注意

1. 相容性：

   • IE 9+
   • Firefox 36
   • Chrome 41
   • Safari 8

2. DEMO：

   PS：不知道怎麼回事，官方 DEMO 網站有問題經常打不開，我貼下圖以供參考。GIT上的示例順序和下圖是完全一致的。

   

   

   

參考