CSS Neon Loader Animation with box-shadow

Creating a glowing loader with CSS is simple yet visually striking. In this tutorial, we’ll build a neon-style loading spinner using only CSS properties like border, box-shadow, and @keyframes. The result is a smooth, futuristic loader that fits perfectly into dark UI designs.

HTML

<div class="loader"></div>

CSS

.loader {
  width: 60px;
  height: 60px;
  box-shadow: 0 0 20px #0ff, 0 0 40px #0ff, 0 0 60px #0ff;
  border: 6px solid transparent;
  border-top: 6px solid #0ff;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 20px #0ff;
  }
  50% {
    box-shadow: 0 0 40px #0ff, 0 0 60px #0ff;
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 20px #0ff;
  }
}

Understanding the design

The loader uses a circular element with one visible colored edge, achieved by combining a transparent border with a colored border-top. This gives the illusion of a partially filled circle that rotates continuously. The glow is enhanced with multiple box-shadow layers that intensify the light.

Focus on box-shadow

The key to the neon look is in the shadow layering. Each shadow adds depth and intensity, giving that glowing aura effect.

...
box-shadow: 0 0 20px #0ff, 0 0 40px #0ff, 0 0 60px #0ff;
...

The smaller values produce a sharper edge, while larger ones spread the light softly. You can easily tweak the glow color and strength.
If you’d like to experiment with the visual intensity and color combinations, try our CSS box-shadow generator — it lets you create custom glow layers interactively before applying them to your project.

How @keyframes create motion

The @keyframes spin animation makes the loader rotate smoothly.

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

The rotation is continuous because we use infinite and linear. Meanwhile, the mid-step at 50% changes the box-shadow to create a pulsing light effect during the spin.

Tips for customization

Change the glow color for different moods.
Adjust the animation duration for faster or slower rotation.
Use thicker borders for a stronger neon effect.
Place it over a dark background for the best visual contrast.

Why it works well

This loader is lightweight, GPU-accelerated, and built with pure CSS. It’s ideal for modern dark-themed UIs, loading screens, or stylish progress indicators.