39 lines
838 B
XML
39 lines
838 B
XML
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="container"
|
||
|
|
viewBox="10 10 20 20" height="20" width="20">
|
||
|
|
<style>
|
||
|
|
.container {
|
||
|
|
animation: rotate 0.8s linear infinite;
|
||
|
|
height: 20px;
|
||
|
|
overflow: visible;
|
||
|
|
transform-origin: center;
|
||
|
|
width: 20px;
|
||
|
|
will-change: transform;
|
||
|
|
}
|
||
|
|
|
||
|
|
.car,
|
||
|
|
.track {
|
||
|
|
fill: none;
|
||
|
|
transition: stroke .5s ease
|
||
|
|
}
|
||
|
|
|
||
|
|
.track {
|
||
|
|
stroke: white;
|
||
|
|
opacity: 0.1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.car {
|
||
|
|
stroke: white;
|
||
|
|
stroke-dasharray: 25, 75;
|
||
|
|
stroke-dashoffset: 0;
|
||
|
|
stroke-linecap: round;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate {
|
||
|
|
100% {
|
||
|
|
transform: rotate(1turn);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<circle class="track" cx="20" cy="20" r="9" stroke-width="2px" fill="none"></circle>
|
||
|
|
<circle class="car" cx="20" cy="20" r="9" pathLength="100" stroke-width="2px" fill="none"></circle>
|
||
|
|
</svg>
|