CSS Loader Generator

A CSS loader - also called a loading spinner or loading indicator - is a purely CSS-based animation displayed on a webpage while content, data, or a process is running in the background. Rather than leaving users staring at a blank or frozen screen, a loader provides visual feedback that something is happening. Because they are built entirely with CSS (using @keyframes animations, border tricks, and transforms), they require no images and add virtually no page weight.

Generate or write your loader CSS and paste it into your stylesheet. Add the corresponding HTML element - typically a single <div> with a class - where you want the spinner to appear. To show the loader only while content is loading, use JavaScript to toggle a class or display property: add the loader element when the operation starts and remove or hide it once it completes. For full-page loading screens, position the loader with position: fixed and a high z-index so it overlays all other content.

The most common approach is a circular spinner built from a <div> styled as a circle using border-radius: 50%, with one side of its border coloured differently from the rest. A @keyframes rule rotating it from 0deg to 360deg combined with animation: spin 1s linear infinite creates the spinning effect. The colour, size, speed, and border thickness are all adjustable through standard CSS properties, and no JavaScript or images are needed.

A spinner (or indeterminate loader) is used when the duration of an operation is unknown - it simply animates continuously to signal activity without indicating how far along the process is. A progress loader (or determinate loader) fills or advances in proportion to the actual completion percentage, giving users a concrete sense of how long they have to wait. Use spinners for operations like API calls or form submissions where timing is unpredictable, and progress loaders for file uploads, downloads, or multi-step processes where progress can be measured.

The simplest modern approach is to use flexbox on the container: set the parent element (or body) to display: flex; justify-content: center; align-items: center; and the loader will be centred both horizontally and vertically. For a full-page overlay, give the container position: fixed; inset: 0; along with the flexbox rules and a background colour or semi-transparent overlay. Alternatively, position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); works well when the loader is inside a relatively positioned parent.

For border-based spinners, change the border-color property - typically only the active side has a visible colour while the rest is set to a lighter or transparent shade. For loaders built with background-color or SVG fills, update those colour values directly. Using a CSS custom property (variable) like --loader-color: #4a90d9; and referencing it throughout the loader's CSS makes it easy to update the colour from a single declaration, which is especially handy when theming.

The animation speed is set by the duration value in the animation shorthand or the animation-duration property. A lower value like 0.5s produces a faster spin, while a higher value like 2s slows it down. For loaders with multiple animated elements, adjust all relevant durations together to keep the motion feeling cohesive. The animation-timing-function - typically linear for spinners and ease-in-out for pulsing loaders - also affects how the motion feels.

CSS loaders are almost always the better choice for modern web projects. They are resolution-independent and look sharp on any screen density including retina displays, unlike GIFs which are fixed-pixel images. They can be resized, recoloured, and animated entirely through CSS without needing new image assets. They also have a smaller file size footprint than animated GIFs and can be controlled or paused with JavaScript. GIFs may still be useful for very complex frame-by-frame animations that would be impractical to recreate in CSS, but for standard loading indicators, CSS is the preferred approach.

By default, a spinning <div> is invisible to screen readers, which means users relying on assistive technology may not know the page is loading. To make loaders accessible, add role="status" and aria-label="Loading" to the loader element so screen readers can announce it. If the loader replaces or blocks other content, also add aria-live="polite" to a container so the loading state change is announced without interrupting the user. Once loading completes, update or remove the element so assistive technology knows the process has finished.

The most common approach is to hide the loader element with JavaScript once your operation completes - either by setting element.style.display = 'none', removing it from the DOM with element.remove(), or toggling a CSS class that applies display: none or visibility: hidden. For smoother transitions, add a short opacity fade-out via a CSS transition before hiding the element. You can also pause the animation without hiding it using animation-play-state: paused, which is useful if you want to freeze the loader in place before a transition.