Loaders

CSS Loading Spinner Animation

A clean, pure-CSS loading spinner — no images, no JavaScript. Copy, paste and use it anywhere.

By Ishrafil Khan Updated June 2026 Bokaro Steel City, India

CSSAnimationLoader

Live Preview

HTML + CSS + JS

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    body { margin: 0; height: 100vh; display: grid; place-items: center; background: #0a0a0a; }
    .spinner {
      width: 64px; height: 64px;
      border: 6px solid #2a2a2a;
      border-top-color: #ffffff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
  </style>
</head>
<body>
  <div class="spinner" role="status" aria-label="Loading"></div>
</body>
</html>

A lightweight loading spinner built with nothing but CSS. It uses a circular border with one coloured edge and a single @keyframes rotation — so it's fast, crisp on any screen, and works without JavaScript or image files.

How it works

The circle is a div with a transparent border on three sides and a solid colour on the top edge. The spin keyframe rotates it 360° infinitely, which makes the coloured edge appear to travel around the ring.

How to use it

Copy the code and drop it into any HTML page.
Change border-top-color to match your brand.
Adjust width/height for a bigger or smaller spinner.
Speed it up or slow it down by changing the 1s animation duration.

Free to use under the MIT license. Built by Ishrafil Khan — need a custom build?

More snippets

Navigation

Pure CSS Hamburger Menu Morph to X

Backgrounds

Immersive Starfield Background Animation