35 lines
1.1 KiB
XML
35 lines
1.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="60" height="60" viewBox="0 0 60 60">
|
|
<defs>
|
|
<style>
|
|
.loader {
|
|
fill: transparent;
|
|
animation: showload 1.5s infinite linear;
|
|
transform-origin: 50% 50%;
|
|
stroke: #555;
|
|
stroke-width: 2;
|
|
fill: none;
|
|
stroke-linecap: round
|
|
}
|
|
|
|
.rotator {
|
|
animation: rotateme 1s infinite linear;
|
|
transform-origin: 30px 30px;
|
|
/* Use 30px instead of 50% as Firefox can't handle percent origins */
|
|
}
|
|
|
|
@keyframes showload {
|
|
0% { stroke-dashoffset: 0; stroke-dasharray: 1,214 }
|
|
50% { stroke-dashoffset: -24; stroke-dasharray: 80,214 }
|
|
100% { stroke-dashoffset: -107; stroke-dasharray: 80,214 }
|
|
}
|
|
|
|
@keyframes rotateme {
|
|
0% { transform: rotate(0deg) }
|
|
100% { transform: rotate(360deg) }
|
|
}
|
|
</style>
|
|
</defs>
|
|
<g class="rotator">
|
|
<circle class="loader" cx="30" cy="30" r="17" stroke-dasharray="107" stroke-dashoffset="160" />
|
|
</g>
|
|
</svg> |