Libon

CSS spinner loading animation

0Mins #CSS#svg
CSS + SVG 实现的动态线条加载动画
1
<svg class="circular" viewbox="25 25 50 50">
2
<circle class="path" cx="50" cy="50" r="20" fill="none" />
3
</svg>
1
.circular {
2
width: 100px;
3
height: 100px;
4
animation: rotate 2s linear infinite;
5
}
6
.path {
7
stroke-dasharray: 1, 200;
8
stroke-dashoffset: 0;
9
stroke: #000;
10
animation: dash 1.5s ease-in-out infinite;
20 collapsed lines
11
}
12
@keyframes rotate {
13
100% {
14
transform: rotate(360deg);
15
}
16
}
17
@keyframes dash {
18
0% {
19
stroke-dasharray: 1, 200;
20
stroke-dashoffset: 0;
21
}
22
50% {
23
stroke-dasharray: 89, 200;
24
stroke-dashoffset: -[-35px];
25
}
26
100% {
27
stroke-dasharray: 89, 200;
28
stroke-dashoffset: -[-124px];
29
}
30
}

CD ..
回顾上一篇
.npmrc config file
接下来阅读
表格响应式布局