Gradient Spinner Loader

<div class="gradient-spinner-loader" aria-label="Loading"></div>

.gradient-spinner-loader{
  width:64px;
  height:64px;
  padding:5px;
  border-radius:50%;

  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    #22d3ee 120deg,
    #8b5cf6 240deg,
    #d946ef 360deg
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  animation:gradientSpinner 1s linear infinite;
}

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

How This Gradient Spinner Loader Works

The Gradient Spinner Loader is a CSS-only circular loading indicator built from a single <div> element. It does not require JavaScript or additional child elements. The spinner’s shape, gradient, hollow center, and rotation are all created with CSS, while the HTML includes aria-label="Loading" to provide a simple accessible description of the indicator.

The .gradient-spinner-loader element is set to 64px wide and 64px high. A border-radius: 50% turns the square element into a circle. Instead of using a traditional CSS border, the component adds 5px of padding and uses that space as the visible spinner ring.

Its color comes from a conic-gradient(). Unlike a standard linear gradient, a conic gradient distributes colors around a center point, which makes it well suited to circular loaders. The gradient begins with a transparent section at 0deg, then moves through cyan #22d3ee at 120deg, purple #8b5cf6 at 240deg, and pink #d946ef at 360deg.

The transparent starting section is important because it creates a visible break in the ring. As the component rotates, that break helps communicate direction and movement instead of making the spinner look like a static multicolored circle. For more detail about this type of background, see the MDN conic-gradient documentation.

The hollow center is created with CSS masking. Two identical linear-gradient(#000 0 0) masks are applied using -webkit-mask. One is restricted to the content-box, while the other covers the complete element.

The component then uses -webkit-mask-composite: xor and mask-composite: exclude. These composite operations remove the center portion from the larger mask, leaving only the padded outer ring visible. The result looks similar to a circular border, but the ring can display the full conic gradient instead of a single border color.

This masking approach is also why the 5px padding value matters. The padding effectively controls the thickness of the visible gradient ring. Increasing it creates a thicker spinner, while reducing it produces a thinner outline.

Animation is handled by the gradientSpinner keyframes. The animation runs for 1s, uses a linear timing function, and repeats infinitely. The keyframe only defines the ending state with transform: rotate(360deg). The browser interpolates the rotation from the element’s initial position to one complete turn.

Because the timing function is linear, the spinner rotates at a constant speed throughout every cycle. Once it reaches 360 degrees, the infinite animation immediately begins the next rotation. Since the first and last visual positions match, the loop appears continuous.

There is no JavaScript in this component. As soon as the CSS is loaded and the loader is visible on the page, the animation begins automatically.

Customizing the Gradient Spinner Loader

The spinner can be adapted by changing its dimensions, ring thickness, gradient stops, and rotation timing while keeping the same HTML structure.

• Change the 64px width and height to make the entire spinner larger or smaller.
• Adjust the 5px padding to control the thickness of the visible gradient ring.
• Replace #22d3ee, #8b5cf6, and #d946ef with colors that match your interface.
• Change the 120deg, 240deg, and 360deg gradient stops to redistribute how much space each color occupies.
• Modify the initial transparent gradient section to make the visible gap larger or smaller.
• Change the 1s animation duration to make the spinner rotate faster or slower.
• Replace the linear timing function if you want the rotation speed to accelerate or slow down during each cycle.

Where to Use the Gradient Spinner Loader

This loader works well when an interface needs to show ongoing activity but does not have a meaningful percentage or completion value to display.

• Form submission states while a request is being processed.
• Dashboard cards that are waiting for remote data.
• Modal dialogs that load content asynchronously.
• Full-page or section-level loading overlays.
• Buttons or controls that temporarily need a compact loading state.
• Dark-themed interfaces where the cyan, purple, and pink gradient matches the surrounding visual style.

For a loading indicator with a different circular structure, the Dual Ring Loader is another related CodeRipple component worth considering. The Gradient Spinner Loader is especially suitable when you want a small indefinite loader that relies entirely on CSS rather than progress-tracking logic.

Frequently Asked Questions

Does the Gradient Spinner Loader use JavaScript?

No. The component contains no JavaScript. Its gradient ring, hollow center, and continuous rotation are all created with CSS.

How is the center of the spinner made transparent?

The component combines two CSS masks and uses mask-composite: exclude together with the WebKit xor equivalent. This removes the center area and leaves only the outer padded ring visible.

Why does the loader use a conic gradient instead of a linear gradient?

A conic gradient distributes colors around a central point, making it a natural fit for circular elements. It allows the cyan, purple, and pink colors to follow the spinner’s ring.

How can I make the spinner rotate faster?

Reduce the current 1s animation duration. For example, a shorter duration completes each 360-degree rotation more quickly, while a longer duration slows the spinner down.

The Gradient Spinner Loader keeps its markup minimal while using conic gradients, masking, and one rotating keyframe animation to create a compact CSS-only loading indicator.