loading加载动画太过枯燥？ 快来试试 loader.css

一、loader.css

【git地址】
【在线展示】

二、项目使用

前端是用vue脚手架搭件的项目.

1. 安装 loader.css
   yarn add loaders.css -S
2. 项目引入
   main.js 注入以下代码

   import "loaders.css/loaders.min.css";

3. 页面使用
   复制需要的款式即可

<div class="loaders">
      <!-- 第1种 -->
      <div class="loader">
        <div class="ball-pulse">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第2种 -->
      <div class="loader">
        <div class="ball-grid-pulse">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第3种 -->
      <div class="loader">
        <div class="ball-clip-rotate">
          <div></div>
        </div>
      </div>
      <!-- 第4种 -->
      <div class="loader">
        <div class="ball-clip-rotate-pulse">
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第5种 -->
      <div class="loader">
        <div class="square-spin">
          <div></div>
        </div>
      </div>
      <!-- 第6种 -->
      <div class="loader">
        <div class="ball-clip-rotate-multiple">
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第7种 -->
      <div class="loader">
        <div class="ball-pulse-rise">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第8种 -->
      <div class="loader">
        <div class="ball-rotate">
          <div></div>
        </div>
      </div>
      <!-- 第9种 -->
      <div class="loader">
        <div class="cube-transition">
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第10种 -->
      <div class="loader">
        <div class="ball-zig-zag">
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第11种 -->
      <div class="loader">
        <div class="ball-zig-zag-deflect">
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第12种 -->
      <div class="loader">
        <div class="ball-triangle-path">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第13种 -->
      <div class="loader">
        <div class="ball-scale">
          <div></div>
        </div>
      </div>
      <!-- 第14种 -->
      <div class="loader">
        <div class="line-scale">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第15种 -->
      <div class="loader">
        <div class="line-scale-party">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="ball-scale-multiple">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第16种 -->
      <div class="loader">
        <div class="ball-pulse-sync">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第17种 -->
      <div class="loader">
        <div class="ball-beat">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第18种 -->
      <div class="loader">
        <div class="line-scale-pulse-out">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第19种 -->
      <div class="loader">
        <div class="line-scale-pulse-out-rapid">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第20种 -->
      <div class="loader">
        <div class="ball-scale-ripple">
          <div></div>
        </div>
      </div>
      <!-- 第21种 -->
      <div class="loader">
        <div class="ball-scale-ripple-multiple">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第22种 -->
      <div class="loader">
        <div class="ball-spin-fade-loader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第23种 -->
      <div class="loader">
        <div class="line-spin-fade-loader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第24种 -->
      <div class="loader">
        <div class="triangle-skew-spin">
          <div></div>
        </div>
      </div>
      <!-- 第25种 -->
      <div class="loader">
        <div class="pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第26种 -->
      <div class="loader">
        <div class="ball-grid-beat">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第27种 -->
      <div class="loader">
        <div class="semi-circle-spin">
          <div></div>
        </div>
      </div>
    </div>

因为颜色默认为白色，所以展示有问题，需调整颜色(根据个人需求调整):

.loader > div {
  div {
    background-color: orange; // 色值
  }
}

---

---

什么？没有喜欢的？
再去这里看一下吧【炫酷loading】