mirror of https://github.com/Mabbs/mabbs.github.io
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.
55 lines
1.5 KiB
55 lines
1.5 KiB
<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>
|
|
|
