单元素装载机：酒吧

我们已经研究过旋转器。 我们已经研究过点。 现在我们要解决加载器的另一种常见模式： 酒吧。我们将在本系列的第三篇文章中做与其他文章相同的事情，即仅使用一个元素并使用灵活的 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 诡计。因此，如果您觉得我们跳得太快或者您需要更多细节，请务必查看这些内容。您还可以阅读我的 我给出的堆栈溢出答案 详细的解释 关于这一切是如何运作的。

动画条形

我们可以对元素的大小或位置进行动画处理来创建条形加载器。让我们通过定义以下动画关键帧来对大小进行动画处理：

@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; }

现在，我们所要做的就是设置高度动画并添加一些延迟！以下是三个示例，不同之处在于颜色和尺寸：

结束了

我希望到目前为止，您对制作看起来复杂的加载动画所拥有的所有能力感到非常鼓舞。我们所需要的只是一个元素，无论是渐变还是伪元素来绘制条形，然后是一些关键帧来移动物体。这就是获得无限可能性的全部秘诀，所以出去开始烹饪一些巧妙的东西吧！

在下一篇文章之前，我将为您留下一组有趣的加载器，我将它们组合在一起 点 和 酒吧!

---

单元素装载机：酒吧 最初发表于 CSS技巧。 你应该 获取时事通讯.

• 硬币聪明。 欧洲最好的比特币和加密货币交易所。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 自由登入。
• 加密鹰。 山寨币雷达。 免费试用。
• 来源：https://css-tricks.com/single-element-loaders-the-bars/