这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件。该loading特效使用:before和:after伪元素来制作动画d的不同部分，然后给他们设置absolute定位和CSS transformations来创建动画效果。
制作方法
对于制作一个水平的loading进度条并不是十分的困难，但是要制作一个平滑运动的圆形进度条就有一点难度了。你要弄明白它们是如何工作的，先来看一下水平进度条的CSS样式代码：
水平进度条
.loading{
position: relative;
background: rgba(255,255,255,.8);
}
.loading:before{
content:'';
box-sizing: border-box;
/* centre everything */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 30px;
border: solid 1px #000;
border-radius: 30px;
}
.loading:after{
content:'';
box-sizing: border-box;
/* centre everything */
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border: solid 5px #000;
width: 28px;
height: 28px;
border-radius: 50%;
}
我们可以为任意元素添加一个class loading来使用上面的代码。我们将会得到下图所示的水平进度条，圆形小球在进度条的中心。
如果你想为整个页面应用loading效果，可以在body元素上添加class，同时还要设置一些页面的高度：
html, body { height: 100%; }
为了完成最终效果，我们需要在进度条上前后来回移动小球。
圆形进度条
对于圆形进度条我们添加以下的CSS代码：
.loading:after{
...
-webkit-animation: loading 3s ease-in-out infinite alternate;
animation: loading 3s ease-in-out infinite alternate;
}
在这个动画中最重要的属性是animation-timing-function和animation-direction。在animation-timing-function属性中我们使用了ease-in-out效果，这种效果在小球改变方向是有一个减速的效果。在这个例子中animation-direction必须设置为alternate。接下来为动画设定动画帧。
@keyframes loading {
0% { transform: translate(-99px, -50%); }
100% { transform: translate(71px, -50%); }
}
@-webkit-keyframes loading {
0% { transform: translate(-99px, -50%); }
100% { transform: translate(71px, -50%); }
}
来解释一下上面的translate取值设定。-50%比较容易理解，就是设置小球垂直居中。
对于0帧和100帧的两个数值，有两个计算公式：
0帧公式:
-(half the width of the bar - border width of the bar)
-(100 - 1) = -99
100帧公式:
(half the width of the bar - border width of the bar – width of circle)
100-1-28 = 71
你可以改变进度条的宽度和其它一些属性，修改之后要重新计算它们的动画帧。
如果觉得《html5 圆形加载进度条 纯css3超酷圆形Loading加载进度条特效》对你有帮助，请点赞、收藏，并留下你的观点哦！
