Baktiyar Ablaikhan

Svg

Source
Uiverse ↗
Author
xopc333
Licence
MIT

Loading…

Code

<div class="loader">
  <svg class="svg-wrap" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle stroke-linecap="round" stroke-width="2" class="svg-stroke" cy="25" cx="50" r="15"></circle>
    <circle class="circle circle-one" cy="25" cx="35" r="1"></circle>
    <circle class="circle circle-two" cy="25" cx="45" r="1"></circle>
    <circle class="circle circle-three" cy="25" cx="55" r="1"></circle>
  </svg>  
</div>
Prompt

Build "Svg", 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/xopc333/wise-fish-34 (xopc333, MIT).