CSS Loader Generator
Background
Primary
Secondary
Size60px
Speed1x
.loader {
  width: 60px;
  height: 60px;
  border: 4px solid #7c6aff33;
  border-top-color: #7c6aff;
  border-radius: 50%;
  animation: spin 0.80s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

CSS Loading Spinner Generator — 10 Pure CSS Loaders

Share

About this tool

Free CSS Loading Spinner Generator

CSS Loader Generator is a free tool for building and customizing pure CSS loading animations without any JavaScript. Loading spinners and indicators are an essential part of every web application — they communicate to the user that an async operation (API request, page load, form submission, image upload) is in progress and that the app has not frozen. This generator provides 10 distinct loader styles — Ring, Dots, Bars, Pulse, Ripple, Dual Ring, Ellipsis, Roller, Grid, and Hourglass — all built entirely from CSS @keyframes animations on standard HTML div elements with no JavaScript or image file dependencies. Because they are GPU-composited CSS animations, they remain smooth at 60fps even when the main JavaScript thread is busy. Each loader is fully customizable: set the primary and secondary colors with color pickers, adjust the size from 16px inline spinners to 80px full-page overlays, and tune the animation speed. The tool generates both the HTML markup and the CSS stylesheet independently so you can copy only what you need for your project.

Features

  • 10 pure CSS loader styles — Ring, Dots, Bars, Pulse, Ripple, Dual Ring, Ellipsis, Roller, Grid, Hourglass
  • Primary and secondary color pickers for full color customization
  • Size slider from small inline spinners to large full-page loaders
  • Animation speed control — faster for urgent states, slower for calm ambient indicators
  • Live preview updates in real time as you adjust every setting
  • Copy HTML and CSS separately, or as a single combined snippet
  • Pure CSS @keyframes — no JavaScript, no library, no image files
  • GPU-composited animations that stay smooth at 60fps
  • Accessible — add role="status" and aria-label="Loading" to the exported HTML
  • 100% free — runs entirely in your browser, no sign-up required

How to Use

Click any loader tile in the preview grid at the top to select it — the larger live preview in the center immediately switches to show the selected loader animating with your current color, size, and speed settings. Use the Primary Color picker to set the main loader color and the Secondary Color picker (where available) to set the track or background ring color. Drag the Size slider left for a small inline spinner (suitable for button states and compact indicators) or right for a large page-level loader. Drag the Speed slider to control the animation duration — moving it left makes the animation faster and more urgent, moving it right makes it slower and more calm. The preview updates in real time as you adjust every control. In the export panel below the preview, switch between the HTML tab (the DOM markup for the loader) and the CSS tab (the @keyframes animation and layout styles). Click Copy HTML to copy just the HTML snippet, or Copy CSS to copy just the stylesheet, or Copy All to copy both together as a complete ready-to-use code block. Paste the CSS into your stylesheet and the HTML wherever you want the loader to appear in your page or component.

Common Use Cases

⟳
Full-Page Loading Screen
Show a centered large loader over the page while it initializes — typically shown immediately, then hidden once the first meaningful paint is complete. Set the loader to 60–80px and overlay it with a full-screen semi-transparent backdrop for a polished full-page loading experience.
◎
Form Submission Feedback
Replace button text with a small 16–20px inline spinner while a form is submitting to prevent double-clicks and communicate that the action is in progress. Restore the button label on success or failure and show a toast notification with the result.
▦
API Data Fetching
Display a loader inside a data table, card grid, or chart area while the initial data is being fetched from an API. This avoids the jarring blank-to-content flash and gives users an immediate visual signal that content is on the way.
✦
Image & Media Loading
Use a pulse or skeleton-style loader as a placeholder while images are loading in a gallery or feed. Overlay it on the image container and remove it via JavaScript's onload event once the image has fully downloaded.
⚙
Inline Button State
Scale the Ring or Dots loader to 16px and embed it beside button text for async button states — file uploads, payment processing, data saves. Set display: inline-flex; gap: 8px on the button to align the spinner and label side by side.
≡
Modal & Dialog Loading
Show a centered loader inside a modal's content area while the modal's data is being fetched — instead of opening an empty dialog. The Ripple and Dual Ring styles look especially clean in constrained modal contexts.

Frequently Asked Questions

A CSS loader is a loading animation built entirely with CSS @keyframes — no JavaScript or image files required. They use HTML elements (typically divs with specific dimensions and borders) styled and animated purely with CSS to produce spinning, pulsing, bouncing, or bar-filling effects. Because they are GPU-composited CSS animations, they remain smooth even when the main JavaScript thread is busy processing data.

10 loader styles are included: Ring (rotating border spinner — the classic), Dots (three bouncing dots), Bars (animated vertical bars), Pulse (expanding and fading circle), Ripple (concentric expanding rings), Dual Ring (two counter-rotating arcs), Ellipsis (dots moving horizontally), Roller (eight orbiting dots), Grid (3×3 fading dot grid), and Hourglass (rotating pseudo-element effect). Each has its own HTML structure and @keyframes animation.

Yes. Use the primary color picker to set the main loader color — for example the spinning arc, the dots, or the bars. Some loader styles also have a secondary color (the track or background ring) which you can set independently. The exported CSS uses these values directly as color hex codes or rgba values so you can easily update them in your own stylesheet later.

Yes. The Size slider scales the loader between small (inline button loader, ~20px) and large (full-page overlay, ~80px). The Speed control adjusts the animation-duration value — lower values make the animation faster, higher values make it slower and more relaxed. Both settings update the live preview and the exported code in real time as you drag the sliders.

No. Every loader in this generator is pure CSS using @keyframes animations — no JavaScript is needed to display or animate them. You can show and hide them by toggling a CSS class like .is-loading or using display: none / display: flex in your own JavaScript, but the animation itself is entirely CSS-driven. This makes them work even in environments where JavaScript is disabled or slow to execute.

Copy the HTML snippet from the HTML tab and paste it into your page wherever you want the loader to appear. Copy the CSS from the CSS tab and paste it into your stylesheet. To show the loader conditionally, wrap it in a container and toggle its visibility with CSS (display: none / display: flex) or by adding/removing a class via JavaScript. For React projects, paste the HTML as JSX (replace class with className) and the CSS into your stylesheet or CSS module.

For screen reader accessibility, add role="status" and aria-label="Loading" to the outer loader element. This tells assistive technology that the region is a live status indicator. You can also add aria-live="polite" to a visually hidden text element that updates from "" to "Loading..." when the loader appears — this announces the state change to screen reader users without requiring them to navigate to the element.

Yes. Scale the loader down to 16–20px using the Size slider and reduce the border-width in the CSS for ring-style loaders to stay proportional. Paste the HTML inside the button element alongside the button text, and set display: inline-flex with align-items: center on the button. This produces a small spinner beside the button label during async operations like form submission or API calls.