Single Element Loaders: The Spinner

Crafting CSS-only loaders is a rewarding challenge. The mesmerizing infinite animations are always satisfying to create. CodePen showcases a vast array of techniques, but this article focuses on achieving a single-element loader with minimal code.

I've developed over 500 single-div loaders, and this four-part series shares the techniques used. We'll explore numerous examples, demonstrating how subtle adjustments yield diverse results, and how concise the code can be.

Single-Element Loaders series:

1. Single Element Loaders: The Spinner — you are here
2. Single Element Loaders: The Dots
3. Single Element Loaders: The Bars
4. Single Element Loaders: Going 3D

This first article creates a common loader pattern: spinning bars.

The Approach

A simple approach uses multiple elements (nine, in this case), each representing a bar, within a parent. Opacity and transforms create the spinning effect.

My method, however, uses just one element:

<div></div>

...and 10 CSS declarations:

.loader {
  width: 150px; /* control the size */
  aspect-ratio: 1;
  display: grid;
  mask: conic-gradient(from 22deg, #0003, #000);
  animation: load 1s steps(8) infinite;
}
.loader,
.loader:before {
  --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
  background: 
    var(--_g)/34% 8%  space no-repeat,
    var(--_g)/8%  34% no-repeat space;
}
.loader:before {
  content: "";
  transform: rotate(45deg);
}
@keyframes load {
  to { transform: rotate(1turn); }
}

Code Breakdown

The code might seem unusual at first, but it's simpler than it appears. First, we define the element's dimensions – a 150px square. aspect-ratio ensures it remains square regardless of resizing.

.loader {
  width: 150px; /* control the size */
  aspect-ratio: 1; /* maintain square shape */
}

For CSS loaders, a single size control value is ideal. Here, it's the width; all calculations are relative to it. This allows easy size adjustments.

Gradients create the bars. This is the most intricate part. A single gradient generates two bars:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

The gradient uses one color and two color stops, resulting in a solid color. The size is 34% wide and 8% tall, centered (50%). The space keyword duplicates the gradient, creating two bars.

From the specification:

The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area. The first and last images touch the edges of the area.

A 34% width allows only two bars (3 34% > 100%), leaving gaps (100% - 2 34% = 32%). space positions these gaps centrally. A width between 33% and 50% ensures at least two bars with spacing.

We create two more bars using a second gradient, resulting in:

background: 
 linear-gradient(#17177c 0 0) 50%/34% 8%  space no-repeat,
 linear-gradient(#17177c 0 0) 50%/8%  34% no-repeat space;

A CSS variable optimizes this:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: 
 var(--_g)/34% 8%  space no-repeat,
 var(--_g)/8%  34% no-repeat space;

This yields four bars. The CSS variable simplifies color updates.

The .loader element and its ::before pseudo-element create four more bars, totaling eight.

.loader {
  width: 150px; /* control the size */
  aspect-ratio: 1;
  display: grid;
}
.loader,
.loader::before {
  --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
  background: 
    var(--_g)/34% 8%  space no-repeat,
    var(--_g)/8%  34% no-repeat space;
}
.loader::before {
  content: "";
  transform: rotate(45deg);
}

display: grid ensures the pseudo-element covers the parent's area, eliminating the need for explicit dimensions.

Rotating the pseudo-element by 45deg positions the remaining bars.

Opacity Control

The effect of a single bar leaving a fading trail is achieved using a CSS mask with a conic-gradient:

mask: conic-gradient(from 22deg,#0003,#000);

This gradient gradually increases transparency clockwise. Applied to the loader, it creates the fading bar illusion. Each bar appears to fade due to the masking, creating the impression of varying opacity.

Rotation Animation

A stepped animation, using steps(8) (where 8 is the number of bars), creates the rotation:

.loader {
  animation: load 3s steps(8) infinite;
}

@keyframes load {
  to { transform: rotate(1turn) }
}

This completes the single-element, minimal-CSS loader. Size and color are easily controlled. Adding a ::after pseudo-element could expand to twelve bars with minor code adjustments. Alternative implementations are also possible, using different gradient and opacity techniques.

Alternative Shapes: Dots

Creating a dot-based loader is similar, using radial gradients instead of linear ones. The core concept of masking for opacity remains the same, but the shapes are circles. Safari compatibility may require gradient adjustments.

Further Examples

Several additional spinner loaders are shown, employing various techniques (gradients, masks, pseudo-elements). These serve as exercises in understanding different approaches.

Conclusion

With a single div, gradients, pseudo-elements, and variables, a variety of spinning loaders can be created. The examples are fundamentally similar, with minor modifications. This is just the beginning; the series will explore more advanced CSS loader techniques.

Single-Element Loaders series:

1. Single Element Loaders: The Spinner — you are here
2. Single Element Loaders: The Dots
3. Single Element Loaders: The Bars
4. Single Element Loaders: Going 3D

The above is the detailed content of Single Element Loaders: The Spinner. For more information, please follow other related articles on the PHP Chinese website!