CSS3 - 纯CSS实现的loading加载动画效果：上（介绍2套动画库）
作者：hangge | 2017-08-19 08:10
预加载 loading 动画效果在网页开发中肯定少不了。比如我们会在加载时显示一个旋转的菊花，或者跳动的小球。过去我们常常会使用一张动态的 gif 图片来实现。虽然方便但不便于我们调整颜色、速度等样式。
其实使用纯 CSS3 就可以实现许多非常炫酷的预加载 loading 动画特效，完全不需要图片资源，也不需要借助 js（最多使用 js 来控制下 loading 动画的显示或隐藏。）
一、spinkit.css
SpinKit 是一套网页动画效果，包含 11 种基于 CSS3 实现的很炫的加载动画。SpinKit 使用硬件加速（translate 和 opacity）的 CSS 动画来创建平滑、且容易定制的动画。
- GitHub 主页地址：https://github.com/tobiasahlin/SpinKit
1，运行效果
rotating-plane
double-bounce
wave
wandering-cubes
pulse
chasing-dots
three-bounce
circle
cube-grid
fading-circle
folding-cube
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下载：
spinkit.css
二、loaders.css
Loaders.css 同样是一款非常出色的加载动画框架，免费、开源，而且比较轻巧。Loaders.css 利用纯 CSS 可以实现很多种样式的 Loading 加载动画，这些动画并不需要图片来辅助，而是仅仅需要 CSS 即可实现，因此运行效率比较不错。
- GitHub 主页地址：https://github.com/ConnorAtherton/loaders.css
1，运行效果
ball-pulse
ball-grid-pulse
ball-clip-rotate
ball-clip-rotate-pulse
square-spin
ball-clip-rotate-multiple
ball-pulse-rise
ball-rotate
cube-transition
ball-zig-zag
ball-zig-zag-deflect
ball-triangle-path
ball-scale
line-scale
line-scale-party
ball-scale-multiple
ball-scale-multiple
ball-beat
line-scale-pulse-out
line-scale-pulse-out-rapid
ball-scale-ripple
ball-scale-ripple-multiple
ball-spin-fade-loader
line-spin-fade-loader
triangle-skew-spin
pacman
ball-grid-beat
semi-circle-spin
ball-scale-random
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下载：loaders.css
全部评论（0）