個 CSS3 loading 動畫庫，簡單易用，動畫流暢，無論是學習還是使用，都很不錯。

關于 Loaders.css

Loaders.css 是一個性能出色的 web 前端代碼庫，或者叫 CSS 庫，因為它完全沒有用到一行 js 代碼或者圖片，僅僅利用純 CSS 就實現多種樣式的 loading 動畫，運行流暢絲滑，輕量小巧，性能優秀。

Loaders.css 技術特性

• 純 CSS 實現，沒有多余的代碼，唯一的依賴就是瀏覽器，非常輕量
• 性能出眾，相比于用 javascript 計算繪圖和布局來實現 loading，Loaders.css 使用的是 CSS3 的動畫屬性和 transform 變形，能極大地利用電腦或手機的圖形硬件性能，所以極為流暢
• 提供將近 30 個不同樣式的 loading 動畫，復制粘貼拿來就可以用

多年使用體驗和感受

loading 動畫是前端開發收到的頻次很高的需求，特別是前后端分離的開發模式，數據都是異步加載的。以前做 loading 都是一張 菊花.gif 走天下， 但現在產品開發要求變高，咱們的追求也變高了，特別是移動端，顯示加載動畫前還得加載一個動圖，這早就 out 了。

直到發現了 Loaders.css，為這些年來上千次的 loading 實現節省了大量的時間和精力。雖然官方支持 npm 安裝和 jQuery 的方式引入，但我更建議面對要求不高的場景，直接復制對應的動畫樣式即可，不需要引入 CSS，這是極致的按需取用。

面對外觀要求的加載場景，我們可以修改 CSS 屬性來達到精準定制的要求來符合產品的調性，無論是移動端還是 pc 端都非常好用，而且也是一個很好的 CSS3 動畫學習研究對象。

得益于 Loaders.css 毫無依賴\高性能\輕量化\免費開源的特點，開發者們又陸續根據 Loaders.css 構建了用于其他技術平臺甚至是 iOS \ android 原生的動畫庫：

• React 版本：react-loaders
• Vue 版本：vue-loaders
• Angular 版本：Masadow
• ember 版本：ember-cli-loaders
• iOS 版本：DGActivityIndicatorView
• Android 版本：Loaders.CSS-Android-App

免費開源說明

Loaders.css 是一個免費開源的前端 CSS 動畫庫，基于 MIT 開源協議托管在 Github 上，任何人和商業機構都可以免費下載使用。

Loaders.css 官網在國內訪問不太穩定，經常有打不開的情況，大家也可以直接訪問 Loaders.css 的 Github 主頁獲取源碼。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點擊查看本次分享的網址。

Loaders.css - 純 CSS 打造的免費開源加載動畫，絲滑流暢高性能！｜那些免費的磚