Spinning Ring Loader

<div class="spinning-ring-loader" aria-label="Loading"></div>

.spinning-ring-loader{
  width:56px;
  height:56px;
  border:6px solid rgba(34,211,238,.18);
  border-top-color:#22d3ee;
  border-right-color:#8b5cf6;
  border-radius:50%;

  animation:ringSpin .8s linear infinite;
}

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

How This Spinning Ring Loader Works

The Spinning Ring Loader is a CSS-only loading indicator built from a single <div> element. It uses a circular border with highlighted top and right sections, then rotates the entire element continuously. There is no JavaScript in this component, so the animation begins automatically as soon as the CSS is applied.

The .spinning-ring-loader element is 56px wide and 56px high. Because both dimensions are equal, border-radius: 50% turns the square box into a perfect circle.

A 6px border surrounds the loader. Its base color is rgba(34,211,238,.18), which creates a faint cyan ring. The low opacity keeps most of the circle subtle while allowing the brighter sections to stand out during rotation.

The top border is changed to #22d3ee, giving one section of the ring a solid cyan color. The right border uses #8b5cf6, adding a purple section beside it. These two highlighted border sides create a clear visual direction as the loader rotates.

The remaining border sections keep the semi-transparent cyan base color. Because the ring contains a mix of bright and faint areas, the rotation is easier to perceive than it would be with one uniform border color.

The animation is applied with animation: ringSpin .8s linear infinite. The .8s duration means the loader completes a full cycle in less than one second. A linear timing function keeps the rotation speed constant from beginning to end, while infinite causes the animation to repeat continuously.

The ringSpin keyframes contain only the final state. At the end of each cycle, the loader uses transform: rotate(360deg). The browser automatically interpolates from its starting rotation to a complete 360-degree turn.

Because a 360-degree rotation visually matches the original position, each cycle connects smoothly to the next one. There is no visible jump when the animation restarts.

The rotating motion relies on the CSS transform property. For more information about rotation and other transform functions, see the MDN CSS transform documentation.

The HTML also includes aria-label="Loading" on the loader element. This gives assistive technologies a short description of the visual loading state even though no visible text is displayed.

Customizing the Spinning Ring Loader

The component uses only a few CSS values, making it easy to adapt its dimensions, colors, and animation speed.

• Change the 56px width and height to make the ring larger or smaller.
• Adjust the 6px border width to create a thinner or thicker loader.
• Modify rgba(34,211,238,.18) to change the color or opacity of the faint base ring.
• Replace #22d3ee to change the highlighted top border color.
• Replace #8b5cf6 to change the highlighted right border color.
• Change the .8s animation duration to make the loader rotate faster or slower.
• Replace linear with another timing function if you want the rotation speed to vary during each cycle.
• Change the 360deg rotation value if you want to experiment with a different amount of movement per animation cycle.

Where to Use the Spinning Ring Loader

This loader is useful when an interface needs a compact indefinite loading state without displaying an exact progress percentage.

• Form submissions while data is being processed.
• Dashboard cards waiting for API or server responses.
• Modal windows while asynchronous content loads.
• Buttons or controls that temporarily need a loading indicator.
• Full-page loading screens with a centered spinner.
• Cards and panels that load independently from the rest of the page.

For another circular loader that uses two independently rotating rings, the Dual Ring Loader is a related CodeRipple component worth considering. The Spinning Ring Loader is a simpler option when one rotating element is enough to communicate that work is still in progress.

Frequently Asked Questions

Does the Spinning Ring Loader use JavaScript?

No. The component contains no JavaScript. Its shape and continuous rotation are created entirely with CSS.

How is the multicolor ring created?

The loader starts with a semi-transparent cyan border. The top border is then changed to solid cyan, while the right border is changed to purple.

Why does the loader use a linear animation?

The linear timing function keeps the ring rotating at a constant speed throughout the entire .8s animation cycle.

How can I make the spinner rotate more slowly?

Increase the current .8s animation duration. A larger duration means each complete 360-degree rotation takes longer.

The Spinning Ring Loader keeps its implementation minimal by combining one circular border, two highlighted border sections, and a continuously repeating rotation animation.