Single Element Loaders: The Bars

This article explores creating loading animations using bars, following the single-element approach and flexible CSS techniques used in previous articles focusing on spinners and dots. We'll generate numerous variations with minimal code changes, leveraging CSS's power.

Series Overview

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

Let's dive into 20 bar loader examples. While this might seem daunting, all examples share the same code structure, with variations achieved through simple value adjustments. The focus isn't on creating one specific loader, but on mastering techniques to generate countless variations from a single base code.

Constructing the Bars

We begin by defining dimensions using width (or height) and aspect-ratio to maintain proportions:

.bars {
  width: 45px;
  aspect-ratio: 1;
}

We simulate three bars using a linear gradient background – a method similar to the dot loaders in Part 2.

.bars {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#000 0 0); /* Define color */
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%; /* 20% * (3 bars   2 spaces) = 100% */
}

This creates a three-bar structure. This article heavily utilizes background manipulation, so referring to previous articles or the linked Stack Overflow answer will provide more detailed explanations if needed.

Animating the Bars

Animation is achieved by altering either the element's size or position. Let's animate the size using keyframes:

@keyframes load {
  0%   { background-size: 20% 100%, 20% 100%, 20% 100%; }
  33%  { background-size: 20% 10% , 20% 100%, 20% 100%; }
  50%  { background-size: 20% 100%, 20% 10% , 20% 100%; }
  66%  { background-size: 20% 100%, 20% 100%, 20% 10%;  }
  100% { background-size: 20% 100%, 20% 100%, 20% 100%; }
}

The keyframes adjust the background-size of each gradient segment across the animation's duration.

Alternatively, fixing the size to 20% 50% and animating the positions yields different results:

.loader { /* ...previous styles... */
  animation: load 1s infinite linear;
}
@keyframes load {
  /* ...position animation keyframes... */
}

By manipulating size and position, countless loader variations are possible. More complex gradients further expand design options. Most examples in the demo use the same markup and styles, differing only in animation combinations.

Enhancing with Advanced Techniques

The masking technique from the dots article can be applied here. Replacing background-* properties with mask-* and adding a gradient creates visually appealing loaders. The core technique remains consistent between dots and bars: gradients define shapes, animation modifies size/position, and masks add color.

Rounding the Bars

A different approach uses the ::before and ::after pseudo-elements to create three rounded bars:

.loader { /* ...styles using CSS variables for size and position... */ }

A continuous gradient effect is simulated by carefully positioning individual gradients within each element. Animating the height with delays produces varied animations.

Conclusion

This article demonstrates the versatility of creating complex loading animations with minimal code. By combining single elements, gradients, pseudo-elements, and animation, a vast range of loading animation designs is achievable. The provided examples and techniques encourage experimentation and the creation of unique, visually appealing loaders.

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