Single Element Loaders: The Dots

This article explores creating loading animations using a single div element. We've already dissected the spinning loader; now, let's tackle another familiar animation: the dots.

Dot loaders are ubiquitous. Their appeal lies in their simplicity: three dots, resembling a text ellipsis (…), performing a dynamic visual sequence.

Series Overview

• Single Element Loaders: The Spinner
• Single Element Loaders: The Dots — Current Article
• Single Element Loaders: The Bars
• Single Element Loaders: Going 3D

Our objective is to replicate this animation using only one div, eliminating the need for individual divs per dot or separate animations. The example above achieves this using a single div, CSS, and no pseudo-elements, cleverly combining background and mask techniques. The illusion of color-changing dots is created by animating a background gradient.

Animating the Background

Let's begin with the background animation:

.loader {
  width: 180px;
  aspect-ratio: 8/5;
  background: 
    conic-gradient(red   50%, blue   0) no-repeat, 
    conic-gradient(green 50%, purple 0) no-repeat;
  background-size: 200% 50%; 
  animation: back 4s infinite linear;
}

@keyframes back {
  0%, 100% { background-position: 0% 0%, 0% 100%; }
  25%  { background-position: 100% 0%, 0% 100%; }
  50%  { background-position: 100% 0%, 100% 100%; }
  75%  { background-position: 0% 0%, 100% 100%; }
}

The 180px-wide .loader element displays two conic gradients with sharp color transitions. The top half uses red and blue, the bottom half green and purple. The 200% width ensures only one color is visible at a time in each half. The animation cycles through positions, creating the illusion of color change.

For a deeper understanding of background-position, refer to this Stack Overflow answer. The animation cleverly manipulates the X and Y coordinates of the gradients.

Why conic-gradient() instead of linear-gradient()?

Using conic-gradient() is more concise and achieves the same result.

By adjusting the animation's timing function from linear to steps(1), we eliminate color flashing.

Creating the Dots

As in the previous article, we utilize CSS masks. Masks allow us to selectively reveal parts of a background. Here, we'll create dots, revealing the background gradients through them.

We'll employ radial-gradient():

.loader {
  /* ...previous styles... */
  --_g: radial-gradient(#000 68%, #0000 71%) no-repeat;
  mask: var(--_g), var(--_g), var(--_g);
  mask-size: 25% 40%;
}

A CSS variable, --_g, simplifies the code. Three radial gradients create the dots.

Now, we need an animation to move the dots:

.loader {
  /* ...previous styles... */
  animation: load 2s infinite;
}

@keyframes load {
  0%, 100% { mask-position: 0% 0%, 50% 0%, 100% 0%; }
  16.67% { mask-position: 0% 100%, 50% 0%, 100% 0%; }
  33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; }
  50%    { mask-position: 0% 100%, 50% 100%, 100% 100%; }
  66.67% { mask-position: 0% 0%, 50% 100%, 100% 100%; }
  83.33% { mask-position: 0% 0%, 50% 0%, 100% 100%; }
}

This animation adjusts the Y-coordinate of each dot's mask-position, creating the up-and-down movement. Combining this with the gradient animation produces the final effect.

Variations and Further Examples

The CSS variable allows for easy color and size adjustments. Different animations can also be created by modifying the keyframes. Further examples, including a single-dot loader and a blobby effect loader, are available here. A CSS Grid approach is also shown, simplifying sizing and positioning.

Conclusion and Next Steps

This article demonstrated creating dot loaders with a single div. The next article will cover bar loaders, building upon the techniques learned here.

Series Overview

• Single Element Loaders: The Spinner
• Single Element Loaders: The Dots — Current Article
• Single Element Loaders: The Bars
• Single Element Loaders: Going 3D

(Remember to replace https://www.php.cn/link/9fc36fa768a74fa93d3ee7bf57b1392c and https://www.php.cn/link/0c6ba56676353996dff5efb2b7789e1e with actual links if you have them.)

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