单元素装载机：点

我们正在研究本系列中的装载机。 不仅如此，我们还分解了一些常见的加载器模式，以及如何用一个 div 重新创建它们。 到目前为止，我们已经分开 经典的旋转装载机. 现在，让我们看一下您可能很清楚的另一个： 点。

点加载器无处不在。 它们很整洁，因为它们通常由三个点组成，看起来像一个文本省略号 (...)，在周围跳舞。

我们的目标是用一个 div 元素做同样的事情。 换句话说，每个点没有一个 div 或每个点没有单独的动画。

上面的加载器示例是由一个 div 元素、一些 CSS 声明和没有伪元素组成的。 我正在使用 CSS 结合两种技术 background 和 mask. 完成后，我们将看到背景渐变动画如何帮助创建每个点在连续上下移动时改变颜色的错觉。

背景动画

让我们从背景动画开始：

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 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%; }
}

我希望这看起来很简单。 我们有一个 180px-宽 .loader 显示两个圆锥渐变的元素，每个渐变都在两种颜色之间停止——第一个渐变是沿着上半部分的红色和蓝色 .loader，第二个渐变是沿着下半部分的绿色和紫色。

加载程序的背景大小的方式（200% 宽），我们一次只能在每一半中看到其中一种颜色。 然后我们有了这个小动画，它可以将背景渐变的位置向左、向右、再向后推，直到永远。

在处理背景属性时——尤其是 background-position ——我总是提到我的 堆栈溢出答案，我将在其中给出详细解释 关于这一切是如何运作的。 如果您对 CSS 背景技巧感到不舒服，我强烈建议您阅读该答案以帮助了解接下来的内容。

在动画中，注意第一层是 Y=0% （放置在顶部）同时 X 是从变化 0% 至 100%. 对于第二层，我们有相同的 X 但是 Y=100% （放置在底部）。

为什么使用 conic-gradient() 而不是 linear-gradient()?

好问题！ 直观地说，我们应该使用线性渐变来创建两个颜色的渐变，如下所示：

linear-gradient(90deg, red 50%, blue 0)

但我们也可以使用 conic-gradient() ——而且代码更少。 我们减少了代码并在此过程中学习了一个新技巧！

左右滑动颜色是一种很好的方式，可以让它看起来像我们正在改变颜色，但如果我们立即改变颜色可能会更好 - 这样，加载器点不可能同时闪烁两种颜色. 为此，让我们更改 animation的计时功能来自 linear 至 steps(1)

装载机点

如果你跟着 本系列的第一篇文章，我打赌你知道接下来会发生什么： CSS 蒙版！ 口罩之所以如此出色，是因为它们让我们 “切出”背景的一部分 以另一个元素的形式。 因此，在这种情况下，我们想要制作几个点，通过这些点显示背景渐变，并剪掉不属于点的任何背景部分。

我们将使用 radial-gradient() 为了这：

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

那里有一些重复的代码，所以让我们创建一个 CSS 变量来精简：

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

酷酷的。 但是现在我们需要一个新的动画来帮助在动画渐变之间上下移动点。

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 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%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

是的，那里总共有三个径向渐变，都具有相同的配置和相同的大小——动画将更新每个的位置。 请注意， X 每个点的坐标是固定的。 这 mask-position 定义为使第一个点位于左侧 (0%），第二个在中心（50%) 和右边的第三个 (100%）。 我们只更新 Y 坐标从 0% 至 100% 让圆点跳舞。

这是我们得到的：

现在，将它与我们的渐变动画结合起来，魔法开始发生：

点加载器的变化

我们在上一个示例中创建的 CSS 变量使交换新颜色和创建同一加载器的更多变体变得更加容易。 例如，不同的颜色和尺寸：

我们的圆点的另一个运动呢？

在这里，我所做的只是更新动画以考虑不同的位置，我们得到了另一个具有相同代码结构的加载器！

我用于遮罩层的动画技术也可以与背景层一起使用，以创建许多具有单一颜色的不同加载器。 我为此写了一篇详细的文章。 您将看到，从相同的代码结构中，我们可以通过简单地更改一些值来创建不同的变体。 我在文章末尾分享了几个例子。

为什么不用一个点的装载机？

这个应该很容易理解，因为我使用的是相同的技术，但逻辑更简单：

这是加载器的另一个示例，我也在其中设置动画 radial-gradient 结合 CSS过滤器 和 mix-blend-mode 创建一个blobby效果：

如果你检查代码，你会发现我真正做的只是动画 background-position，就像我们对之前的加载器所做的那样，但是添加了一些 background-size 使它看起来像斑点随着吸收点而变大。

如果您想了解这种斑点效果背后的魔力，可以参考 这些交互式幻灯片 （仅限 Chrome）由 安娜·都铎 因为她很好地涵盖了这个话题！

这是另一个点加载器的想法，这次使用了不同的技术：

这个只有 10 个 CSS 声明和一个关键帧。 主元素及其两个伪元素具有相同的背景配置，具有一个径向渐变。 每个人创建一个点，总共三个。 动画通过为每个点使用不同的延迟从上到下移动渐变。

哦，注意这个演示如何使用 CSS Grid。 这允许我们利用网格的默认值 stretch 对齐，以便两个伪元素覆盖其父元素的整个区域。 无需尺码！ 用 translate() 我们都准备好了。

更多例子！

只是为了说明这一点，我想给你留下一堆额外的例子，这些例子确实是我们所看到的内容的变体。 当您查看演示时，您会发现我们在此处介绍的方法非常灵活，并提供了大量的设计可能性。

接下来...

好的，所以我们在本文中介绍了点加载器，在上一篇中介绍了微调器。 在这个由四部分组成的系列的下一篇文章中，我们将把注意力转向另一种常见的加载器类型： 酒吧。 我们将利用我们目前学到的很多东西，看看我们如何扩展它们以创建另一个单元素加载器，代码尽可能少，灵活性尽可能高。

---

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

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