CSS Loader Generator
Create beautiful, performant CSS loading animations with live preview. Design custom loaders and spinners with full control over size, colors, speed, and animation style.
Appearance
Animation
/* HTML */
<div class="loader-spinner"></div>
/* CSS */
.loader-spinner {
width: 60px;
height: 60px;
border: 4px solid #e5e7eb;
border-top: 4px solid #3b82f6;
border-radius: 50%;
animation: spinnerAnimation 1s linear infinite;
}
@keyframes spinnerAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Recommended Settings
Performance Best Practices
- •Use transform and opacity for GPU-accelerated animations
- •Avoid animating width, height, or positional properties
- •Keep animations between 0.8-1.5s for optimal UX
- •Use will-change: transform on animated elements sparingly
- •Test on low-end devices to ensure smooth performance
Accessibility Guidelines
- •Include @media (prefers-reduced-motion: reduce) for accessible animations
- •Provide alternative loading indicators for screen readers
- •Ensure sufficient color contrast (4.5:1 ratio minimum)
- •Don't rely solely on color to convey loading state
- •Consider adding sr-only text describing loading state
Pro Tips
- •Match loader style to your brand identity for consistency
- •Use subtle loaders for background tasks, prominent ones for blocking actions
- •Linear timing works best for spinners, ease-in-out for pulse effects
- •Always test loaders on both light and dark backgrounds
Most Popular
Spinner with 60px size, 1s duration, linear timing
When to Use This Tool
Display loaders during initial page load or route transitions. Use prominent loaders like Spinner or Dual Ring to indicate the entire page is loading.
Recommended: Spinner or Dual Ring preset
Show loaders while fetching data from APIs or databases. Use subtle loaders like Dots or Pulse Ring that don't distract from existing content.
Recommended: Dots or Pulse Ring preset
Indicate form processing or submission status. Use clear, visible loaders like Bar or Spinner to provide feedback during the wait.
Recommended: Bar or Spinner preset
Display placeholder loaders while images or content load. Use skeleton-style loaders or subtle pulse animations.
Recommended: Pulse Ring or Grid preset
Show loaders at the bottom of lists or feeds when loading more content. Use small, unobtrusive loaders like Ellipsis or Dots.
Recommended: Ellipsis or Dots preset
How It Works
Choose a preset loader style or start with defaults
Adjust size to fit your design (20-200px range)
Set primary and secondary colors to match your brand
Configure animation speed (0.3-3s, recommend 0.8-1.5s)
Adjust thickness/border width for visual weight
Select timing function (linear for spinners, ease-in-out for organic motion)
Test on different background colors using preview
Toggle animation on/off to inspect static state
Copy generated CSS with both HTML structure and styles
Paste into your project and customize further if needed
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
Which loader type should I use?
Choose based on context: Spinner for general loading, Dots for subtle loading, Bar for progress indication, Pulse Ring for minimal designs, and specialized ones (Heart, Infinity) for branded experiences. Match the loader prominence to the importance of the loading action.
How do I make loaders accessible?
Add @media (prefers-reduced-motion: reduce) to disable or simplify animations for users who need it. Include ARIA labels like aria-label='Loading...' and role='status' on loader containers. Provide screen-reader-only text describing the loading state.
What's the optimal animation speed?
0.8-1.5 seconds works best for most loaders. Faster (0.3-0.8s) can feel frantic, slower (1.5-3s) feels sluggish. Spinners work well at 1s, pulse effects at 1.2-1.5s. Always test with real users and adjust based on feedback.
Why use CSS loaders instead of GIFs or SVGs?
CSS loaders are lightweight (no image files), scalable (perfect at any size), customizable (colors and speeds), and performant (GPU-accelerated). They also work better with dark mode and are easier to maintain. However, complex animations might benefit from SVG.
How do I center a loader on the page?
Use flexbox or grid on the parent container. Example: display: flex; justify-content: center; align-items: center; min-height: 100vh; Or use absolute positioning: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
Can I combine multiple loader effects?
Yes! You can layer loaders or use multiple animation properties. For example, combine rotation with scale for a spinning-pulsing effect. However, keep it simple - overly complex loaders can distract users and impact performance.