CSS Loader Generator
Generate pure CSS loading animations instantly. Choose spinner, dots, bars or pulse — copy the CSS and HTML and drop them into any project.
① Choose a loader type ② Adjust size, color and speed ③ Copy CSS and HTML
Color
#C9B89A
Speed
How it works
Each loader is built with CSS animations only — no JavaScript or images. The spinner uses border rotation, dots use scale bounce, bars use scaleY, and pulse uses scale with opacity.
Speed control
Slow = 1.5s, Normal = 0.8s, Fast = 0.4s animation duration. Dots and bars use animation-delay on child elements to create the staggered effect.
Drop-in ready
Copy both CSS and HTML snippets, paste them into your project, and the loader works immediately. No dependencies, no frameworks required.
CSS output
.loader {
width: 48px;
height: 48px;
border: 6px solid #c9b89a33;
border-top-color: #c9b89a;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
HTML output<div class="loader"></div>
What is a CSS loading animation?
A CSS loading animation — also called a CSS spinner or CSS loader — is a user interface pattern that indicates pending data or processing without requiring JavaScript or GIF images. Modern CSS enables complex animations using @keyframes with transform, opacity, and border properties. Common patterns include spinners (rotating border), dots (bouncing circles), bars (scaling rectangles), and pulse (breathing circle). Pure CSS loaders have no runtime overhead, render at any resolution, and are compatible with all modern browsers.
Frequently asked questions
A CSS loader is a purely visual loading indicator implemented with CSS animations and @keyframes — no JavaScript or image assets are required. They signal to users that content is being loaded or processed.
The spinner uses a circular element with a transparent border except for one side that is colored. A rotate(360deg) @keyframes animation spins the element continuously, creating the circular spinner effect.
The dots loader shows three circles that scale up and down in sequence using the scale() transform, creating a bouncing effect. The bars loader shows four rectangles that scale vertically using scaleY(), creating a rhythmic wave effect.
For dots and bars, each child element has a different animation-delay value. This means each element starts its animation cycle at a different time, creating the cascading or ripple appearance even though all elements use the same @keyframes.
CSS animations using transform and opacity are GPU-accelerated in all modern browsers and have minimal performance impact. Avoid animating properties like width, height, or top/left which trigger layout reflow.
Wrap the loader in a container with display:flex; justify-content:center; align-items:center; and set its dimensions to match the space you want to cover. For a full-page overlay, add position:fixed; inset:0.
CSS @keyframes animations are supported in all modern browsers (Chrome, Firefox, Safari, Edge) since 2013. No vendor prefixes are needed for the animations used in this tool.