CSS Loader & Spinner Generator

About the CSS Loader & Spinner Generator

Choose a loading indicator from a library of twelve single-element CSS loaders made for MySmartCoPilot — ring, dual ring, gradient ring, iOS-style segments, orbit, bouncing dots, typing dots, bars, pulse, ripple, an indeterminate progress bar and a skeleton shimmer — and adjust its color, track, size, thickness and speed while it runs.

The code is ready to paste: one <div> with role="status" and a label that screen readers can read, the CSS with a prefers-reduced-motion version that stops the movement, and an animated SVG version for places where you cannot add CSS, such as an <img>, a CSS background or a design file.

Common uses

• Spinners for buttons, forms and data tables while a request is running.
• Skeleton placeholders for cards and lists that are still loading.
• Indeterminate progress bars for uploads and long tasks.
• Animated SVG loaders for emails, slides, prototypes and no-code builders.

Loaders people can perceive

• Give it a name. role="status" makes the element a polite live region (WAI-ARIA 1.2): screen readers announce changes to the text inside it without interrupting. Live regions work best when the element is already on the page and its text changes, so keep the status element in place and set its hidden text (“Loading results…”) when the work starts. An aria-label alone is not reliably announced when it changes.
• Mark what is busy. Put aria-busy="true" on the area that is being updated and remove it when the content has arrived; then remove the loader or change its text to “Loaded”.
• Respect reduced motion. The CSS includes @media (prefers-reduced-motion: reduce), which replaces spinning, sliding and bouncing with a slow fade, so the indicator still shows activity without movement.
• Make it visible. A loader is a graphic that conveys state, so aim for at least 3 : 1 contrast with the background (WCAG 1.4.11); the tool shows the ratio for your preview background.
• Long waits. WCAG 2.2.2 asks for a way to pause moving content that runs for more than five seconds alongside other content, but treats a preload animation as essential when nothing can be done meanwhile and hiding progress would make the page look frozen (Understanding 2.2.2).

How the loaders are built

Each loader is a single element animated with CSS Animations and only transform, opacity, background or box-shadow changes. Rings use borders; the gradient ring and the segments use a conic-gradient with a radial mask to cut out the middle; dots and bars are background gradients whose position or size is animated; typing dots are one dot with two box-shadows; ripple, orbit and the progress bar add ::before / ::after. Sizes include the borders (box-sizing: border-box), and every keyframe name starts with your class name, so several loaders can share a page.

The SVG version

The SVG draws the same loader with circles, lines and rectangles and animates them with CSS inside the file — no script — so it also moves when used as an <img>, a CSS background-image or in design tools that play SVG animations. It contains its own reduced-motion rule. When it is used as an <img>, give the image an alt text (or alt="" with a separate status text).

Limitations

• The previews use your browser; very old browsers without conic gradients, masks or aspect-ratio show some loaders as plain shapes.
• The SVG version follows the CSS closely but not pixel for pixel (the gradient ring is drawn as twelve arcs).
• Many email programs do not show SVG images at all, and some apps show SVG files without their animation.
• Size, thickness and duration have sensible limits for each loader (for example 16–160 px for spinners and 60–600 px for bars).

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.