Use the free Loading Spinner Maker below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
Why Spinners Still Matter
A spinner is a promise: something is happening, and the page has not frozen. Without it, a two-second wait feels like a broken page, and users click again, refresh, or leave. With it, the same wait feels like normal work. The spinner does not make anything faster, but it changes how the wait feels, because the user sees proof that the system is alive. The tool above lets you build a spinner that matches your site: pick a shape, size, speed, and colour, and copy the CSS.
Spinners suit short, uncertain waits: a form submitting, a file uploading, a search running. They do not suit long, measurable waits. If you know a task is 60 percent done, show a progress bar with a percentage, not a spinner, because the user deserves real information. If a task takes more than about ten seconds, add a message explaining what is happening and what the user can do meanwhile. A spinner alone is a placeholder for information, not a replacement for it.
How to Use the Maker
Pick a shape first. The border ring is the classic spinner: a circle with one coloured edge that rotates. The double ring uses two coloured edges and feels more technical. The bouncing dots feel friendly and suit chat and social interfaces. The growing bars feel like sound or activity and suit media tools. Each shape uses the same controls, so you can compare them directly and pick the one that fits your site’s tone.
Then set the size and speed. Size should match the context: a small spinner, around 30 to 40 pixels, suits buttons and inline loading. A medium spinner, around 60 to 90 pixels, suits a content area. A large spinner, above 120 pixels, suits a full-page wait, but use it rarely, because a huge spinner dominates the screen. Speed works the same way: around one second per rotation feels calm and normal. Faster than half a second feels frantic, and slower than two seconds feels stuck, even when the work underneath is fine.
Colour and Contrast
Colour should match your brand, but it must also be visible against its background. A light grey spinner on a white page is nearly invisible, which defeats the purpose. Pick a colour with clear contrast against the page, and keep the track, the uncoloured part of the ring, pale but visible, so the rotation reads clearly. The tool’s colour picker updates the preview at once, so you can test a colour against the light preview background before you ship it.
One colour is enough. A rainbow spinner draws attention to itself instead of to the wait, and it clashes with most designs. If your brand has a strong colour, use it. If not, a neutral dark grey or a calm teal works on almost any page. The copied code uses your colour for the moving edge and a pale grey for the rest of the ring, which is the standard pattern and the easiest to read at a glance.
Spinners, Skeletons, and Progress Bars
These three loading patterns solve different problems, and picking the wrong one confuses users. A spinner says work is happening but gives no detail. A skeleton says content is coming and shows its shape, which is better when the layout is known, such as a feed or a card list. A progress bar says how much is done, which is better when the work is measurable, such as an upload. Use a spinner when the wait is short and the result shape is unknown. Use a skeleton when the layout is known. Use a progress bar when the percentage is known.
Accessibility for Loading States
A spinner is visual, so screen reader users need a text equivalent. Add a visually hidden message such as Loading, or an aria-live region that announces when loading starts and ends. Without it, a screen reader user may hear nothing and assume the page is broken. Also, never rely on a spinner alone to block interaction: disable the submit button while loading, so users cannot submit twice, and restore it if the action fails, with a clear error message.
Frequently Asked Questions
How fast should a spinner rotate? Around one second per rotation feels normal. Much faster feels frantic, and much slower feels stuck. The tool lets you test speeds from 0.3 to 3 seconds.
Should the spinner be in a button or on the page? Both are valid. A small spinner inside a button shows that the button’s action is running. A larger spinner in the content area shows that the page section is loading. Match the size to the area.
Can I use the copied CSS directly? Yes. The code includes the spinner class and the rotation keyframes. Add a Loading label next to it for screen readers, and you are done.
Build a spinner above, match it to your brand colour, and pair it with a short message for longer waits. A calm spinner, honestly used, keeps users patient.