blob: 529186987ba6afb14acc3691877eb31d0fe2c522 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="m-loading-icon m-loading-wipe">
<defs>
<style>
.m-loading-icon {
stroke: #343640;
stroke-width: 3.5;
stroke-linecap: round;
background: none;
vertical-align: middle;
}
.m-loading-icon .m-loading-icon-bg-path{
fill: none;
stroke: #F2F2F2;
}
.m-loading-icon .m-loading-icon-active-path{
fill: none;
stroke: #666666;
transform-origin: 50% 50%;
}
.m-loading-wipe .m-loading-icon-active-path{
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
animation: loading-wipe 1.5s ease-in-out infinite, loading-rotate 2s linear infinite;
}
.m-loading-default .m-loading-icon-active-path{
stroke-dasharray: 60, 150;
animation: loading-rotate 0.8s linear infinite;
}
@keyframes loading-rotate{
to{transform:rotate(1turn)}
}
@keyframes loading-wipe{
0%{
stroke-dasharray:1,200;
stroke-dashoffset:0;
}
50%{
stroke-dasharray:90,150;
stroke-dashoffset:-40px;
}
to{
stroke-dasharray:90,150;
stroke-dashoffset:-120px;
}
}
</style>
</defs>
<title>loading</title>
<g>
<g>
<circle cx="25" cy="25" r="20" class="m-loading-icon-bg-path"></circle>
<circle cx="25" cy="25" r="20" class="m-loading-icon-active-path"></circle>
</g>
</g>
</svg>
|
