CSS Loader Generator

Controls

40px
0.8s

Preview & CSS

 
   
 
 
   
 
 
 
How to Use
 
     
  1. Pick a loader type — Select Spinner, Dots, Bar, or Pulse from the preset buttons.
    2.  
  2. Choose color — Use the color picker to match your brand or UI palette.
    3.  
  3. Set size — Drag the Size slider between 20px and 80px.
    4.  
  4. Adjust speed — Control animation duration from 0.3s (fast) to 2s (slow).
    5.  
  5. Copy CSS — Get the complete CSS including @keyframes and the .loader class.
    6.  
 
 
 
What Are CSS Loaders?
 
CSS loaders are pure CSS animations that indicate loading or processing states. They require no images, no JavaScript, and no external libraries — just HTML and CSS.
 
Each loader uses CSS @keyframes for the animation and properties like border, transform, and opacity to create the motion. Because they use compositor-friendly properties, they perform well even on mobile devices.
 
 
 
Common Use Cases
 
 
API data fetching
 
Form submission feedback
 
Image lazy loading
 
Page transitions
 
Button loading states
 
Inline content loading
 
 
Tips & Best Practices
 
 
 Match your brand color 
Use your primary brand color for the loader so it feels intentional rather than generic. Semi-transparent versions of the color work well for the track in Spinner and Bar loaders.
 
 
 Speed considerations 
Loaders around 0.8–1.2s feel natural. Faster loops feel anxious; slower ones feel sluggish. Match the expected wait time when possible.
 
 
 Accessibility 
Add role="status" and aria-label="Loading" to the loader's wrapper element so screen readers announce the loading state.
 
 
 Reduced motion 
Respect @media (prefers-reduced-motion: reduce) by either hiding the loader or switching to a static indicator when users prefer less animation.
 
 
 
Frequently Asked Questions
 
 
Which loader type should I use?
 
Spinner is the most universally recognized loading indicator. Dots work well for chat or messaging contexts. Bar suits progress-oriented tasks. Pulse is great for skeleton screens or gentle background activity.
 
 
 
Can I change the loader color dynamically?
 
Yes. Replace the hardcoded color with a CSS custom property: --loader-color: #6366f1; and reference it in the loader CSS. Then update the variable via JavaScript or cascade.
 
 
 
Do these loaders work in all browsers?
 
Yes. They use standard CSS animations and transforms supported in all modern browsers including mobile Safari, Chrome, Firefox, and Edge.
 
 
 
How do I center the loader on a page?
 
Wrap the loader in a container with display: flex; justify-content: center; align-items: center; min-height: 100vh; to center it both horizontally and vertically.