Create animated loading spinners and progress indicators with pure CSS and customizable speed/color.
CSS Loading Spinner Generator turns a selected color and speed into styling for an animated loading spinner or progress indicator. The generated CSS defines the visual appearance and repeating motion, so the indicator can animate without JavaScript controlling individual frames. The most important limitation is that the animation does not know whether any work is actually progressing. Your application must still show the indicator when an operation begins, remove it when the operation ends, and handle failure or cancellation separately.
The generator expresses the selected indicator as CSS styling plus a timed animation. The animation changes visual properties over a cycle and repeats, creating motion without script-driven frame updates. Speed controls the cycle timing, while color controls the painted spinner or indicator. The CSS defines appearance and motion only; your page decides when the associated element exists or is visible.
Treat the speed setting as animation timing, not as a measurement of application performance. A faster cycle makes the spinner appear more active but does not mean that the underlying request will finish sooner. The selected color may also look different against different page backgrounds, especially when the design uses transparent, partially opaque, or visually thin regions.
No. The CSS animation has no knowledge of a network request, calculation, upload, or other task. Application logic must show the spinner when work starts and hide or remove it when work succeeds, fails, or is cancelled. If the element remains present and visible, its repeating animation can continue after the task has finished.
No. A moving shape provides a visual waiting cue, but it does not by itself communicate status or a completion value to assistive technology. Add meaningful status text and appropriate semantics in the surrounding interface. For measurable progress, consider the HTML progress element with an updated value; for indeterminate progress, omit its value attribute.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.