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.
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.
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 oflinear-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.
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.
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.
This article demonstrated creating dot loaders with a single div. The next article will cover bar loaders, building upon the techniques learned here.
(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!