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

最新推荐文章于 2025-04-03 07:30:00 发布

原创最新推荐文章于 2025-04-03 07:30:00 发布 · 421 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

css 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在使用Vue脚手架的项目中通过yarn安装并导入loader.css库，提供多种加载动画样式，并指导如何调整颜色。适合前端开发者快速为网页添加美观的加载指示器。

loader.css

一、loader.css
二、项目使用

一、loader.css

【git地址】
【在线展示】

二、项目使用

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

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

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

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

<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】