CSS Loading Spinners Tutorial: Create Animated Loaders with Pure CSS

2 Mar 2026·7 min read

CSS loading spinners are essential UI elements that provide visual feedback to users during data loading, form submissions, or page transitions. In this comprehensive tutorial, we'll explore how to create stunning css loading spinner animations using only CSS, no JavaScript required.

What are CSS Loading Spinners and Why Use Them

A css loader animation is a visual indicator that shows users that content is being processed or loaded. These animated elements serve several important purposes:

User Experience: They prevent users from thinking the application has frozen or crashed
Visual Feedback: They communicate that the system is actively working on their request
Professional Polish: Well-designed spinners add a polished, professional feel to your interface
Performance Perception: They can make loading times feel shorter by engaging users visually

Pure CSS spinners offer advantages over JavaScript-based solutions: they're lightweight, perform smoothly, and don't block the main thread during execution.

Basic CSS Spinner with Border Animation

Let's start with the most common type of loading spinner css - the rotating border spinner. This classic design uses a circular element with a colored border that rotates continuously.

/* HTML */
<div class="spinner"></div>

/* CSS */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

This basic spinner works by creating a circle with a transparent border and one colored section. The animation property applies a continuous rotation using the @keyframes rule.

Advanced Gradient Loading Spinners with Color Effects

To create more visually appealing css animated loader effects, we can incorporate CSS gradients. These create smooth color transitions that add depth and modern styling to your spinners.

Try it yourself → Create beautiful gradient backgrounds and effects for your loading spinners with our interactive CSS Gradient Generator.

Open CSS Gradient Generator

.gradient-spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(#ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #ff6b6b);
  animation: rotate 1.5s linear infinite;
  position: relative;
}

.gradient-spinner::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: white;
  border-radius: 50%;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

This gradient spinner uses conic-gradient to create a rainbow effect. The ::before pseudo-element creates the inner white circle, making it appear as a colorful ring.

Pulse and Fade Loading Animations

Not all loading animations need to rotate. Pulse and fade effects create subtle, elegant pure css spinner alternatives that work well in minimalist designs.

Pulse Animation

.pulse-loader {
  width: 40px;
  height: 40px;
  background-color: #3498db;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

Dot Fade Animation

.dot-loader {
  display: flex;
  gap: 4px;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: #3498db;
  border-radius: 50%;
  animation: fade 1.4s ease-in-out infinite both;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0; }

@keyframes fade {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

Customizing Spinner Size, Speed, and Colors

To make your css loading spinner fit perfectly into your design, you'll need to customize various properties. Here's how to create flexible, reusable spinner components:

CSS Custom Properties for Easy Customization

.customizable-spinner {
  --spinner-size: 40px;
  --spinner-color: #3498db;
  --spinner-speed: 1s;
  --border-width: 4px;
  
  width: var(--spinner-size);
  height: var(--spinner-size);
  border: var(--border-width) solid rgba(0,0,0,0.1);
  border-top: var(--border-width) solid var(--spinner-color);
  border-radius: 50%;
  animation: spin var(--spinner-speed) linear infinite;
}

/* Size variants */
.spinner-small { --spinner-size: 20px; --border-width: 2px; }
.spinner-large { --spinner-size: 60px; --border-width: 6px; }

/* Speed variants */
.spinner-fast { --spinner-speed: 0.6s; }
.spinner-slow { --spinner-speed: 2s; }

/* Color variants */
.spinner-success { --spinner-color: #27ae60; }
.spinner-warning { --spinner-color: #f39c12; }
.spinner-danger { --spinner-color: #e74c3c; }

This approach using CSS custom properties makes it easy to create multiple spinner variations while maintaining a single base component.

Responsive Spinner Sizing

.responsive-spinner {
  width: 2rem;
  height: 2rem;
  border: 0.2rem solid rgba(0,0,0,0.1);
  border-top: 0.2rem solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@media (min-width: 768px) {
  .responsive-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 0.25rem;
  }
}

Try it yourself → Experiment with different gradient combinations for your loading spinners using our CSS Gradient Generator tool.