介紹

loaders.css是Github上一個使用純粹的css實現的開源loading動畫庫，完全用CSS編寫的加載動畫的集合。每個動畫僅限於CSS屬性的一小部分，以避免複雜的繪畫和佈局計算。下面這張圖是在demo頁面截取的Gif效果圖，可供參考！

Github

就這樣一個小小的庫也收穫了9.5k的stars，以下是其倉庫源地址

https://github.com/ConnorAtherton/loaders.css

安裝方式

自由選擇安裝方式進行安裝使用

<code>bower install loaders.css/<code>

<code>npm i --save loaders.css/<code>

用法

1、標準用法

• 包括 loaders.min.css
• 創建一個元素並添加動畫類（例如
  ）
• 將適當數量的
  s插入該元素

  jQuery（可選）

  • 包括loaders.min.css，jQuery和loaders.css.js
  • 創建一個元素並添加動畫類（例如
    ）
  • loaders.js 是為每個動畫注入正確數量的div元素的簡單幫助庫
  • 要初始化頁面加載後添加的加載器，請選擇div並調用loaders它們（例如$('.loader-inner').loaders()）
  • enjoy it！

  定製化

  • 更改背景顏色

  將樣式添加到正確的子div元素

  <code>.ball-grid-pulse > div {
    background-color: orange;
  }/<code>

  • 更改尺寸大小

  使用2D比例轉換

  <code>.loader-small .loader-inner {
    transform: scale(0.5, 0.5);
  }/<code>

  瀏覽器兼容性

  • IE11
  • Chrome 41+
  • FireFox 36+
  • Safari 8+

  衍生產物

  Loaders.css衍生了很多適用於其它平臺或框架的優秀庫，這些都是受Loaders.css的啟發而產生的

  • React

  https://github.com/jonjaques/react-loaders

  • Vue

  https://github.com/Hokid/vue-loaders

  • Angular

  https://github.com/Masadow

  • ember

  https://github.com/kaermorchen/ember-cli-loaders

  • iOS

  https://github.com/gontovnik/DGActivityIndicatorView

  • Android

  https://github.com/varunsridharan/Loaders.CSS-Android-App

  總結

  Loaders.css是一個非常出色的loading動畫庫，可以將它運用到你任何新的或者現有的項目中，性能出眾，定製化，enjoy it！

  
  

  

  "

閱讀更多 最美分享Coder 的文章

關鍵字: jQuery 瀏覽 源地址