Home » Codes » CSS » CSS Top Codes » CSS Loading Spinner

CSS Loading Spinner

A loading spinner shows the visitor that something is loading. This one needs only one HTML element and a few lines of CSS.

HTML

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

CSS

.spinner {
  width: 40px;
  height: 40px;
  border: 5px solid #e0e0e0;
  border-top-color: #0073aa;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

Output in the browser (the circle does not rotate in this box, but it does on your page):

Output in the browser

How it works

  • A grey circle is made with border and border-radius: 50%.
  • Only the top border has a blue colour, so one part of the circle is coloured.
  • The animation rotates the circle by 360 degrees again and again (infinite) at the same speed (linear).
Note: Add role="status" and a hidden text like “Loading…” for screen readers. Also respect visitors who prefer less motion with @media (prefers-reduced-motion: reduce).

Related: CSS Transitions and Animations.

Share this post:

Share on LinkedIn
Learn more about the similar topics:
Tutorials
No Content Found.
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.