html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效

这是一款效果炫酷的纯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%;