$width: 64px
$height: 64px
$dotWidth: 10px
$dotHeight: 10px
$radius: 5px
$offset: 9.37px
@function getLeft( $x ) {
@return ($width/4)*$x
}
@function getTop( $y ) {
@return ($height/4)*$y
}
@keyframes changeOpacity {
from { opacity: 1}
to { opacity: .2}
}
.q-loading {
position: fixed
top: 0
left: 0
right: 0
bottom: 0
.q-loading-overlay {
position: fixed
top: 0
left: 0
right: 0
bottom: 0
background-color: rgba(255, 255, 255, .5)
}
.q-loading-content {
position: absolute
left: 50%
top: 50%
transform: translate(-50%, -50%)
width: $width
height: $height
z-index: 2
}
.dot {
width: 10px
height: 10px
position: absolute
background-color: #0033cc
border-radius: 50% 50%
opacity: 1
animation: changeOpacity 1.04s ease infinite
}
.dot1 {
left: 0
top: 50%
margin-top: -$radius
animation-delay: 0.13s
}
.dot2 {
left: $offset
top: $offset
animation-delay: 0.26s
}
.dot3 {
left: 50%
top: 0
margin-left: -$radius
animation-delay: 0.39s
}
.dot4 {
top: $offset
right: $offset
animation-delay: 0.52s
}
.dot5 {
right: 0
top: 50%
margin-top: -$radius
animation-delay: 0.65s
}
.dot6 {
right: $offset
bottom: $offset
animation-delay: 0.78s
}
.dot7 {
bottom: 0
left: 50%
margin-left: -$radius
animation-delay: 0.91s
}
.dot8 {
bottom: $offset
left: $offset
animation-delay: 1.04s
}
}
代码使用scss定义了大圆和小圆圈的半径，不管改成多大只需要更改变量，下面样式无需改变。
HTML代码
HTML的代码非常简单，只要为进度条提供一个容器就可以了。基本的HTML代码如下：
<div class="wrapper">
<div class="load-bar">
<div class="load-bar-inner" data-loading="0"><span id="counter"></span></div>
</div>
<h1>Loading</h1>
<p>Please wait...(By:<a href="http://www.jiawin.com">www.jiawin.com</a>)</p>
</div>
CSS样式表
接下来是为我们的进度条定义样式，这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性，让进度条开始动起来，就其中的进度条动画设置代码如下：
.load-bar-inner {
height: 99%
width: 0%
border-radius: inherit
position: relative
background: #c2d7ac
background: linear-gradient(#e0f6c8, #98ad84)
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3)
animation: loader 10s linear infinite
}
运行效果：
1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。
2、然后写html结构，只需要一个div元素即可，class名字叫做img
3、设置其边框为不同的颜色，边框宽度设置成100px。
4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。
5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码
6、来看一下最后的效果，还是不错的。
