How to create loading spinner in css

CssHow-ToBeginner · 3 min read

How to Create a Loading Spinner in CSS Quickly

To create a loading spinner in CSS, use a div with a border styled as a circle and animate its rotation using @keyframes. The spinner is made by setting a border with one colored side and the rest transparent, then applying a continuous rotation animation.

📐

Syntax

A loading spinner uses a div styled with border to create a circle. One side of the border is colored, and the others are transparent to create the spinning effect. The @keyframes rule defines the rotation animation, which is applied with animation.

border-radius: 50% makes the shape round.
border: 4px solid sets thickness and style.
border-color sets one side colored and others transparent.
@keyframes spin rotates the element 360 degrees.
animation: spin 1s linear infinite runs the rotation continuously.

css

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

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

💻

Example

This example shows a simple blue loading spinner that rotates smoothly. The spinner is a circle with a colored top border and transparent sides, spinning continuously.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Loading Spinner</title>
<style>
  .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid transparent;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 50px auto;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>
  <div class="spinner" aria-label="Loading"></div>
</body>
</html>

Output

A small blue circle with a top border colored that spins continuously in the center of the page.

⚠️

Common Pitfalls

Common mistakes when creating CSS spinners include:

Not setting border-radius: 50%, which results in a square shape instead of a circle.
Using the same color for all border sides, which removes the spinner effect.
Forgetting to add the animation property or incorrect @keyframes syntax, so the spinner does not rotate.
Not setting a fixed size, causing inconsistent spinner sizes.

css

.wrong-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #3498db; /* All sides same color */
  /* Missing border-radius: 50%; */
  /* Missing animation */
}

.correct-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid transparent;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

📊

Quick Reference

Tips for creating CSS loading spinners:

Use border-radius: 50% for circles.
Color only one border side to create the spinning effect.
Use @keyframes to rotate the spinner smoothly.
Set animation with linear timing and infinite iteration.
Include aria-label="Loading" for accessibility.

✅

Key Takeaways

Create a circle with a transparent border and one colored side using CSS borders.

Use @keyframes to animate rotation for a smooth spinning effect.

Always set border-radius to 50% to make the spinner round.

Apply animation with linear timing and infinite repetition for continuous spinning.

Add accessibility labels like aria-label="Loading" for screen readers.