About this tool
Draw a spinning loader and copy the CSS.
Set the diameter and the spin time, then pick the top-border color. The preview rotates in this tab and the textarea holds a keyframes rule plus a class. Paste both into the stylesheet that already loads on your page.
This does not create an image file and it does not wait on a server. The animation is a border trick, so a browser that ignores keyframes shows a still ring. Check reduced-motion users before you ship a loop that never stops.
Read the privacy line on this page before you use the result in public.
Quick steps
- Draw a spinning loader and copy the CSS.
- Set the diameter and the spin time, then pick the top-border color. The preview rotates in this tab and the textarea holds a keyframes rule plus a class. Paste both into the stylesheet that already loads on your page.
- This does not create an image file and it does not wait on a server. The animation is a border trick, so a browser that ignores keyframes shows a still ring. Check reduced-motion users before you ship a loop that never stops.
Read the privacy line on this page before you use the result in public.
FAQ
Draw a spinning loader and copy the CSS.
Set the diameter and the spin time, then pick the top-border color. The preview rotates in this tab and the textarea holds a keyframes rule plus a class. Paste both into the stylesheet that already loads on your page.
This does not create an image file and it does not wait on a server. The animation is a border trick, so a browser that ignores keyframes shows a still ring. Check reduced-motion users before you ship a loop that never stops.
Read the privacy line on this page before you use the result in public.