How to use CSS Spinner and Skeleton Generator

Choose a fixed spinner or skeleton template.
Set the supported size, colors and animation speed.
Review the source and retain its status and reduced-motion behavior in your page.

Example: CSS Spinner and Skeleton Generator

Ring spinner with the default size and speed.

You add

Loading template: ring Spinner size (px): 40 Skeleton maximum width (px): 320 Skeleton line height (px): 16 Skeleton lines: 3 Indicator color: #334155 Track or skeleton background color: #e2e8f0 Animation duration (seconds): 1 Visible loading status: Loading…

You get

Generated the ring loading template.

Options

Template dimensions: Ring and dots use spinner size. Skeletons use line dimensions and count. Settings for another template do not change the selected output.
Status and duration: Keep the visible status tied to real work. Animation duration changes the visual cycle; it does not measure request progress.

Supported inputs and limits

Fixed controlled templates only; no arbitrary CSS or markup. A visual loader does not track request progress or prove an operation is running. Preserve the status label and stop or remove the loader when the real work ends. Ring and dots use sizes from 16 to 160 px. Skeletons allow widths from 80 to 800 px within the container, heights from 8 to 80 px and one to eight lines. Animation duration is 0.5 to 5 seconds; status text is at most 120 characters. Standalone demos block scripts and network requests.

Where your input is processed

This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.

Remove the loader when work finishes

A loading pattern should give way to the completed result or a useful error. Keep its status text accessible and preserve the reduced-motion fallback when copying the CSS. Review the colors on your actual surface; the indicator alone cannot communicate success, failure or a reliable percentage. The downloaded demo illustrates styling and does not start a request.

Questions about CSS Spinner and Skeleton Generator

Does the animation report progress?

No. It indicates a waiting state only. Connect it to the real operation and report progress separately when known.

What happens with reduced motion?

The output removes the animation while retaining a visible loading indicator and status text.

Should the status be announced continuously?

No. Use a stable loading message and announce meaningful state changes rather than every animation cycle.

Project manager: Tony Hines · Content updated 4 October 2026 · Report a problem

CSS Spinner and Skeleton Generator

Generate output controls