Bicycle
- Source
- Uiverse ↗
- Author
- fanishah
- Licence
- MIT
Loading…
Code
<div>
<svg class="loader" viewBox="0 0 48 30" width="48px" height="30px">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
<g transform="translate(9.5,19)">
<circle class="loader_tire" r="9" stroke-dasharray="56.549 56.549"></circle>
<g class="loader_spokes-spin" stroke-dasharray="31.416 31.416" stroke-dashoffset="-23.562">
<circle class="loader_spokes" r="5"></circle>
<circle class="loader_spokes" r="5" transform="rotate(180,0,0)"></circle>
</g>
</g>
<g transform="translate(24,19)">
<g class="loader_pedals-spin" stroke-dasharray="25.133 25.133" stroke-dashoffset="-21.991" transform="rotate(67.5,0,0)">
<circle class="loader_pedals" r="4"></circle>
<circle class="loader_pedals" r="4" transform="rotate(180,0,0)"></circle>
</g>
</g>
<g transform="translate(38.5,19)">
<circle class="loader_tire" r="9" stroke-dasharray="56.549 56.549"></circle>
<g class="loader_spokes-spin" stroke-dasharray="31.416 31.416" stroke-dashoffset="-23.562">
<circle class="loader_spokes" r="5"></circle>
<circle class="loader_spokes" r="5" transform="rotate(180,0,0)"></circle>
</g>
</g>
<polyline class="loader_seat" points="14 3,18 3" stroke-dasharray="5 5"></polyline>
<polyline class="loader_body" points="16 3,24 19,9.5 19,18 8,34 7,24 19" stroke-dasharray="79 79"></polyline>
<path class="loader_handlebars" d="m30,2h6s1,0,1,1-1,1-1,1" stroke-dasharray="10 10"></path>
<polyline class="loader_front" points="32.5 2,38.5 19" stroke-dasharray="19 19"></polyline>
</g>
</svg>
</div>Prompt
Build "Bicycle", a loader animation. Write it as plain HTML and CSS: one container element and a stylesheet, no JavaScript unless it is essential. Technique: CSS keyframes, inline SVG. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://uiverse.io/fanishah/calm-dingo-24 (fanishah, MIT).