画圆
用SVG画一个圆先。
html:
<svg class="load" viewBox="25 25 50 50">
<circle class="loading" cx="50" cy="50" r="20" fill="none" />
</svg>
.load {
width: 80px;
height: 80px;
}
.loading {
stroke: rgb(53, 157, 218);
stroke-width: 5;
fill: none;
}
效果是这样的：
用SVG画圆
动画
定义一个动画并使用。
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 130, 200;
stroke-dashoffset: -50;
}
100% {
stroke-dasharray: 130, 200;
stroke-dashoffset: -188;
}
}
.loading {
stroke: rgb(53, 157, 218);
stroke-width: 5;
fill: none;
animation: dash 1.5s linear infinite;
}
效果变成这样：
旋转
最后给动画添加上旋转的效果。
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.load {
animation: rotate 2s linear infinite;
}
最终的效果：
原理
主要利用 SVG 绘制一个圆形，结合其 stroke 属性，最后加上一些 css3 中的动画，实现最终的 loading 动画效果。
绘制圆形时，使用 SVG <circle> 标签,下面是 SVG 代码：
<svg class="load" viewBox="10 10 80 80">
<circle class="loading" cx="50" cy="50" r="30" />
</svg>
- cx, cy：定义圆点的 x 和 y 坐标，默认为(0,0)；
- r：定义圆形的半径；
- viewBox="x, y, width, height"：x：左上角的横坐标，y：左上角纵坐标，width：宽度，height：高度。这个就像qq截图，x，y 是选中的起始点，width 和 height 是选择截图的宽度和高度。viewBox 区域会铺满 SVG，所以可以定义 SVG 的大小，来限制 viewBox 的大小。
绘制好圆形，使用SVG的 stroke 属性，来自定义描边样式。常见的 stroke 属性有：
- stroke：定义描边的颜色；
- stroke-width：定义描边的宽度；
- stroke-dasharray：用于创建虚线描边；
stroke-dasharray: 10, 10;
- stroke-dashoffset：定义描边的起始位置；
stroke-dashoffset:10;
-
stroke-linecap：定义描边端点的样式；
图片来自于[SVG|MDN](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes) -
stroke-linejoin：定义两个描边线段之间连接方式；
图片来自于[SVG|MDN](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes) - stroke-opacity：定义描边的透明度；
利用这些stroke属性，定义前面出现的@keyframes dash、@keyframes rotate，就可以达到我们想要的效果了。
