Create animated CSS loading spinners and skeleton loaders with customizable size, color, and speed.
Build a reusable loading indicator by choosing an animated spinner or a skeleton placeholder, then adjusting its size, color, and animation speed. The generator turns those visual choices into CSS that can be copied into a page and visually evaluated before integration. The important limitation is that the result represents an indeterminate waiting state. It does not measure download progress, detect when content is ready, or stop itself. Application logic must still show and remove the loader at the appropriate times.
A spinner's chosen dimensions establish its footprint, its color defines the visible indicator, and its speed setting controls how quickly the animation cycle repeats. The generated CSS supplies repeating motion, while the surrounding application controls when the element appears and disappears. A faster cycle changes only the visual cadence; it does not indicate that the underlying operation is progressing more quickly.
A skeleton loader stands in for content with block-shaped placeholders and animated styling. Its dimensions should approximate the final component so the page does not jump when real content replaces it. Color choices need enough distinction to make placeholders recognizable without making them resemble active controls. The generated CSS covers appearance and motion; markup, loading-state logic, and replacement timing remain the application's responsibility.
No. The spinner is an indeterminate animation and has no inherent connection to the task being performed. Use it when progress cannot be quantified or when a brief operation only needs a waiting signal. For known progress, use a progress indicator whose value is updated from real application data rather than treating animation speed or rotation as a measurement.
No. CSS supplies the visible appearance and motion, but accessibility depends on the surrounding document and application behavior. Provide an appropriate textual status when users need notification, avoid leaving unavailable controls misleadingly interactive, and consider reduced-motion preferences. Also remove or update the loading state when content arrives so assistive technology is not given stale information.
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.