本文编写于 214 天前,最后修改于 138 天前,其中某些信息可能已经过时。

预加载 loading 动画效果在网页开发中肯定少不了。比如我们会在加载时显示一个旋转的菊花,或者跳动的小球。过去我们常常会使用一张动态的 gif 图片来实现。虽然方便但不便于我们调整颜色、速度等样式。
其实使用纯 CSS3 就可以实现许多非常炫酷的预加载 loading 动画特效,完全不需要图片资源,也不需要借助 js(最多使用 js 来控制下 loading 动画的显示或隐藏。)

官方QQ群

一、spinkit.css
SpinKit 是一套网页动画效果,包含 11 种基于 CSS3 实现的很炫的加载动画。SpinKit 使用硬件加速(translate 和 opacity)的 CSS 动画来创建平滑、且容易定制的动画。
GitHub 主页地址:https://github.com/tobiasahlin/SpinKit

1,运行效果

2,样例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="spinkit.css" type="text/css">
    <style>
      #container {
        margin-left:30px;
        font-size: 12px;
        color: #c0c0c0;
        display: flex;
        flex-wrap: wrap;
        width: 700px;
        background-color: #17607D;
        padding-top:20px;
      }
      .vbox{
        display: flex;
        flex-direction: column;
        text-align: center;
        width:135px;
        height:135px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="vbox">
        rotating-plane
        <div class="sk-rotating-plane"></div>
      </div>
      <div class="vbox">
        double-bounce
        <div class="sk-double-bounce">
          <div class="sk-child sk-double-bounce1"></div>
          <div class="sk-child sk-double-bounce2"></div>
        </div>
      </div>
      <div class="vbox">
        wave
        <div class="sk-wave">
          <div class="sk-rect sk-rect1"></div>
          <div class="sk-rect sk-rect2"></div>
          <div class="sk-rect sk-rect3"></div>
          <div class="sk-rect sk-rect4"></div>
          <div class="sk-rect sk-rect5"></div>
        </div>
      </div>
      <div class="vbox">
        wandering-cubes
        <div class="sk-wandering-cubes">
          <div class="sk-cube sk-cube1"></div>
          <div class="sk-cube sk-cube2"></div>
        </div>
      </div>
      <div class="vbox">
        pulse
        <div class="sk-spinner sk-spinner-pulse"></div>
      </div>
      <div class="vbox">
        chasing-dots
        <div class="sk-chasing-dots">
          <div class="sk-child sk-dot1"></div>
          <div class="sk-child sk-dot2"></div>
        </div>
      </div>
      <div class="vbox">
        three-bounce
        <div class="sk-three-bounce">
          <div class="sk-child sk-bounce1"></div>
          <div class="sk-child sk-bounce2"></div>
          <div class="sk-child sk-bounce3"></div>
        </div>
      </div>
      <div class="vbox">
        circle
        <div class="sk-circle">
          <div class="sk-circle1 sk-child"></div>
          <div class="sk-circle2 sk-child"></div>
          <div class="sk-circle3 sk-child"></div>
          <div class="sk-circle4 sk-child"></div>
          <div class="sk-circle5 sk-child"></div>
          <div class="sk-circle6 sk-child"></div>
          <div class="sk-circle7 sk-child"></div>
          <div class="sk-circle8 sk-child"></div>
          <div class="sk-circle9 sk-child"></div>
          <div class="sk-circle10 sk-child"></div>
          <div class="sk-circle11 sk-child"></div>
          <div class="sk-circle12 sk-child"></div>
        </div>
      </div>
      <div class="vbox">
        cube-grid
        <div class="sk-cube-grid">
          <div class="sk-cube sk-cube1"></div>
          <div class="sk-cube sk-cube2"></div>
          <div class="sk-cube sk-cube3"></div>
          <div class="sk-cube sk-cube4"></div>
          <div class="sk-cube sk-cube5"></div>
          <div class="sk-cube sk-cube6"></div>
          <div class="sk-cube sk-cube7"></div>
          <div class="sk-cube sk-cube8"></div>
          <div class="sk-cube sk-cube9"></div>
        </div>
      </div>
      <div class="vbox">
        fading-circle
        <div class="sk-fading-circle">
          <div class="sk-circle1 sk-circle"></div>
          <div class="sk-circle2 sk-circle"></div>
          <div class="sk-circle3 sk-circle"></div>
          <div class="sk-circle4 sk-circle"></div>
          <div class="sk-circle5 sk-circle"></div>
          <div class="sk-circle6 sk-circle"></div>
          <div class="sk-circle7 sk-circle"></div>
          <div class="sk-circle8 sk-circle"></div>
          <div class="sk-circle9 sk-circle"></div>
          <div class="sk-circle10 sk-circle"></div>
          <div class="sk-circle11 sk-circle"></div>
          <div class="sk-circle12 sk-circle"></div>
        </div>
      </div>
      <div class="vbox">
        folding-cube
        <div class="sk-folding-cube">
          <div class="sk-cube1 sk-cube"></div>
          <div class="sk-cube2 sk-cube"></div>
          <div class="sk-cube4 sk-cube"></div>
          <div class="sk-cube3 sk-cube"></div>
        </div>
      </div>
    </div>
  </body>
</html>

css下载:原文:CSS3 - 纯CSS实现的loading加载动画效果:上(介绍2套动画库)spinkit.css

二、loaders.css
Loaders.css 同样是一款非常出色的加载动画框架,免费、开源,而且比较轻巧。Loaders.css 利用纯 CSS 可以实现很多种样式的 Loading 加载动画,这些动画并不需要图片来辅助,而是仅仅需要 CSS 即可实现,因此运行效率比较不错。
GitHub 主页地址:https://github.com/ConnorAtherton/loaders.css

1,运行效果


2,样例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="loaders.css" type="text/css">
    <style>
      #container {
        margin-left:30px;
        font-size: 12px;
        color: #c0c0c0;
        display: flex;
        flex-wrap: wrap;
        width: 700px;
        background-color: #17607D;
        padding-top:20px;
      }
      .vbox{
        display: flex;
        flex-direction: column;
        align-items: center;
        width:140px;
        height:140px;
      }
      .vbox > div{
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="vbox">
        ball-pulse
        <div class="ball-pulse">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-grid-pulse
        <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>
      <div class="vbox">
        ball-clip-rotate
        <div class="ball-clip-rotate">
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-clip-rotate-pulse
        <div class="ball-clip-rotate-pulse">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        square-spin
        <div class="square-spin">
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-clip-rotate-multiple
        <div class="ball-clip-rotate-multiple">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-pulse-rise
        <div class="ball-pulse-rise">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-rotate
        <div class="ball-rotate">
          <div></div>
        </div>
      </div>
      <div class="vbox">
        cube-transition
        <div class="cube-transition">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-zig-zag
        <div class="ball-zig-zag">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-zig-zag-deflect
        <div class="ball-zig-zag-deflect">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-triangle-path
        <div class="ball-triangle-path">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-scale
        <div class="ball-scale">
          <div></div>
        </div>
      </div>
      <div class="vbox">
        line-scale
        <div class="line-scale">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        line-scale-party
        <div class="line-scale-party">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-scale-multiple
        <div class="ball-scale-multiple">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-scale-multiple
        <div class="ball-pulse-sync">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-beat
        <div class="ball-beat">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        line-scale-pulse-out
        <div class="line-scale-pulse-out">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        line-scale-pulse-out-rapid
        <div class="line-scale-pulse-out-rapid">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-scale-ripple
        <div class="ball-scale-ripple">
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-scale-ripple-multiple
        <div class="ball-scale-ripple-multiple">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-spin-fade-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>
      <div class="vbox">
        line-spin-fade-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>
      <div class="vbox">
        triangle-skew-spin
        <div class="triangle-skew-spin">
          <div></div>
        </div>
      </div>
      <div class="vbox">
        pacman
        <div class="pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-grid-beat
        <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>
      <div class="vbox">
        semi-circle-spin
        <div class="semi-circle-spin">
          <div></div>
        </div>
      </div>
      <div class="vbox">
        ball-scale-random
        <div class="ball-scale-random">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </body>
</html>

css下载:原文:CSS3 - 纯CSS实现的loading加载动画效果:上(介绍2套动画库)loaders.css

原文出自:https://www.hangge.com/blog/cache/detail_1755.html