You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.5 KiB
56 lines
1.5 KiB
3 years ago
|
<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>
|