单元素加载器：条形

我们已经了解了旋转器。 我们已经了解了点。 现在我们将解决另一种常见的加载器模式：条形。我们将在这系列文章的第三篇文章中做与其他文章相同的事情，即使用单个元素，并使用灵活的 CSS 使创建变体变得容易。

让我们从不是一个，不是两个，而是 20 个条形加载器示例开始。

什么？！你会详细介绍每一个吗？对于一篇文章来说太长了！

乍一看可能感觉是这样！但它们都依赖于相同的代码结构，我们只需要更新几个值来创建变体。这就是 CSS 的全部威力。我们不是学习如何创建一个加载器，而是学习不同的技术，这些技术允许我们仅使用相同的代码结构来创建尽可能多的加载器。

让我们制作一些条形！

我们首先使用 width（或 height）以及 aspect-ratio 定义它们的尺寸以保持比例

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

我们使用背景上的线性渐变来“伪造”三个条形 - 与我们在本系列文章的第 2 部分中创建点加载器的方式非常类似。

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

上面的代码将为我们提供以下结果

与本系列的其他文章一样，我们将处理大量的 background 技巧。因此，如果您觉得我们跳跃得太快，或者需要更多细节，请务必查看这些文章。您还可以阅读我的 Stack Overflow 回答，其中我详细解释了 所有这些是如何工作的。

动画条形

我们通过定义以下动画关键帧来动画元素的大小或位置以创建条形加载器

@keyframes load {
  0%   { background-size: 20% 100%, 20% 100%, 20% 100%; }  /* 1 */
  33%  { background-size: 20% 10% , 20% 100%, 20% 100%; }  /* 2 */
  50%  { background-size: 20% 100%, 20% 10% , 20% 100%; }  /* 3 */
  66%  { background-size: 20% 100%, 20% 100%, 20% 10%;  }  /* 4 */
  100% { background-size: 20% 100%, 20% 100%, 20% 100%; }  /* 5 */
}

看看那里发生了什么？在 0% 到 100% 之间，动画会更改元素背景渐变的 background-size。每个关键帧都设置三个背景大小（每个渐变一个）。

这是我们得到的

您能开始想象通过对大小或位置的不同动画配置进行调整可以获得的所有可能变体吗？

让我们将大小固定为 20% 50%，这次更新位置

.loader {
  width: 45px;
  aspect-ratio: .75;
  --c: no-repeat linear-gradient(#000 0 0);
  background: 
    var(--c),
    var(--c),
    var(--c);
  background-size: 20% 50%;
  animation: load 1s infinite linear;
}
@keyframes load {
  0%   { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */
  20%  { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */
  40%  { background-position: 0% 0%  , 50% 50% , 100% 100%; } /* 3 */
  60%  { background-position: 0% 100%, 50% 0%  , 100% 50%;  } /* 4 */
  80%  { background-position: 0% 100%, 50% 100%, 100% 0%;   } /* 5 */ 
  100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…这将为我们带来另一个加载器！

您可能已经掌握了技巧。您所需要做的就是定义一个时间轴，然后将其转换为关键帧。通过动画大小、位置 - 或两者！- 我们触手可及无数的加载器可能性。

一旦我们对这种技术感到满意，我们就可以进一步使用更复杂的渐变来创建更多加载器。

除了演示中的最后两个示例之外，所有条形加载器都使用相同的底层标记和样式，以及动画的不同组合。打开代码并尝试独立地可视化每个帧；您会发现创建数十种 - 如果不是数百种 - 变体是多么简单。

变得花哨

您还记得我们在 本系列文章的第二篇文章中 对点加载器执行的遮罩技巧吗？我们可以在此处执行相同的操作！

如果我们在 mask 属性中应用所有上述逻辑，我们可以使用任何背景配置来为我们的加载器添加花哨的色彩。

让我们使用一个演示并更新它

我所做的只是将所有 background-* 更新为 mask-*，并添加了渐变颜色。就这么简单，但我们得到了另一个很酷的加载器。

那么点和条形之间没有区别吗？

没有区别！我写了两篇不同的文章来涵盖尽可能多的示例，但在两篇文章中，我都依赖于相同的技术

1. 使用渐变来创建形状（点或条形，或者可能是其他东西）
2. 动画 background-size 和/或 background-position 来创建加载器动画
3. 添加遮罩以添加一点颜色

圆角条形

这次让我们尝试一些不同的东西，我们可以对条形的边缘进行圆角处理。

使用一个元素及其 ::before 和 ::after 伪元素，我们定义了三个相同的条形

.loader {
  --s: 100px; /* control the size */

  display: grid;
  place-items: center;
  place-content: center;
  margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after {
  height: var(--s);
  width: calc(var(--s) / 5); /* 20px */
  border-radius: var(--s);
  transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i:  1; }

这将为我们提供三个条形，这次不依赖于线性渐变

现在诀窍是用一个漂亮的渐变填充这些条形。为了模拟连续渐变，我们需要使用 background 属性。在上图中，绿色区域定义了加载器覆盖的区域。该区域应该与渐变的大小相同，如果我们进行数学运算，则它等于将图中标记为 S 的两边相乘，或者 background-size: var(--s) var(--s)。

由于我们的元素是单独放置的，我们需要更新每个元素内部渐变的位置，以确保它们全部重叠。通过这种方式，即使它实际上是三个渐变，我们也可以模拟一个连续的渐变。

对于主元素（放置在中心），背景需要位于中心。我们使用以下内容

.loader {
  /* etc. */
  background: linear-gradient() 50% / var(--s) var(--s);
}

对于左侧的伪元素，我们需要左侧的背景

.loader::before {
  /* etc. */
  background: linear-gradient() 0% / var(--s) var(--s);
}

对于右侧的伪元素，背景需要定位到右侧

.loader::after {
  background: linear-gradient() 100% / var(--s) var(--s);
}

使用与我们用于平移的相同的 CSS 变量 --_i，我们可以这样编写代码

.loader {
  --s: 100px; /* control the size */
  --c: linear-gradient(/* etc. */); /* control the coloration */

  display: grid;
  place-items: center;
  place-content: center;
}
.loader::before,
.loader::after{
  content: "";
  grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{
  height: var(--s);
  width: calc(var(--s) / 5);
  border-radius: var(--s);
  background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s);
  transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after  { --_i:  1; }

现在，我们所要做的就是动画高度并添加一些延迟！以下是三个示例，它们唯一的区别在于颜色和大小

总结

我希望到目前为止，您对 创建复杂外观的加载动画 的能力感到非常鼓舞。我们只需要一个元素，无论是渐变还是伪元素来绘制条形，然后是一些关键帧来移动它们。这就是获得无限可能性的全部秘诀，所以开始动手，制作一些很棒的东西吧！

在下一篇文章发布之前，我将留给您一个有趣的加载器合集，其中我将点和条形组合在一起！