单元素装载机：微调器

制作纯 CSS 加载器是我最喜欢的任务之一。 看着那些无限的动画总是令人满意的。 而且，当然，还有 很多 制作它们的技术和方法——不需要 比 CodePen 看得更远 看看有多少。 不过，在本文中，我们将看到如何使单个元素加载器编写尽可能少的代码。

我有...... 收集了 500 多个单 div 加载器 在这个由四部分组成的系列中，我将分享我用来创建其中许多的技巧。 我们将涵盖大量示例，展示微小的调整如何带来有趣的变化，以及我们需要编写多少代码来实现这一切！

对于第一篇文章，我们将创建一个更常见的加载器模式：旋转条：

这是方法

这个加载器的一个简单实现是为包裹在父元素中的每个条创建一个元素（总共九个元素），然后使用 opacity 和 transform 以获得旋转效果。

不过，我的实现只需要一个元素：

<div class="loader"></div>

…和 10 个 CSS 声明：

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

让我们分解一下

乍一看，代码可能看起来很奇怪，但您会发现它比您想象的要简单。 第一步是定义元素的尺寸。 在我们的例子中，它是一个 150px 正方形。 我们可以把 aspect-ratio 使用，所以无论如何元素都保持方形。

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

在构建 CSS 加载器时，我总是尝试使用一个值来控制整体大小。 在这种情况下，它是 width 我们涵盖的所有计算都将参考该值。 这允许我更改单个值来控制加载程序。 能够轻松调整加载程序的大小而不需要调整很多附加值总是很重要的。

接下来，我们将使用渐变来创建条形图。 这是最棘手的部分！ 让我们使用 一种 创建渐变 二 像下面这样的酒吧：

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

我们的渐变由一种颜色和两种颜色停止定义。 结果是没有褪色或过渡的纯色。 大小等于 34% 宽和 8% 高。 它也被放置在中心（50%）。 诀窍是使用关键字值 space - 这复制了渐变，给了我们两个总条。

从 规范:

图像在不被剪裁的情况下以适合背景定位区域的频率重复，然后将图像隔开以填充该区域。 第一个和最后一个图像接触该区域的边缘。

我使用的宽度等于 34% 这意味着我们不能有两个以上的酒吧（3*34% 大于 100%) 但是有两个小节我们将有空格 (100% - 2 * 34% = 32%）。 该空间位于两个条之间的中心。 换句话说，我们使用的渐变宽度在 33% 和 50% 确保我们至少有两个条，它们之间有一点空间。 价值 space 是为我们正确放置它们的原因。

我们做同样的事情并制作第二个类似的渐变以在顶部和底部再获得两个条形图，这给了我们一个 background 财产价值：

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

我们可以使用 CSS 变量对其进行优化以避免重复：

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

因此，现在我们有四个条形图，并且由于 CSS 变量，我们可以写入一次颜色值，这使得以后更新变得容易（就像我们对加载器的大小所做的那样）。

要创建剩余的条，让我们点击 .loader 元素及其 ::before 伪元素以获得另外四个条形图，总共八个条形图。

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

注意使用 display: grid. 这允许我们依赖网格的默认值 stretch 对齐以使伪元素覆盖其父元素的整个区域； 因此无需在其上指定维度——另一个减少代码并避免我们处理大量值的技巧！

现在让我们旋转伪元素 45deg 定位剩余的钢筋。 悬停以下演示以查看技巧：

设置不透明度

我们试图做的是创造这样一种印象，即当它沿着圆形路径行进时，有一根柱子会在其后面留下一串褪色的柱子。 我们现在需要的是使用条形的透明度来制作这条轨迹，我们将使用 CSS mask 与圆锥梯度相结合，如下所示：

mask: conic-gradient(from 22deg,#0003,#000);

为了更好地理解这个技巧，让我们将它应用到一个全彩色的盒子上：

红色的透明度顺时针逐渐增加。 我们将它应用于我们的加载器，我们有不同不透明度的条：

实际上，每个条似乎都在褪色，因为它被渐变遮盖并位于两种半透明颜色之间。 当它运行时几乎不会被注意到，所以这有点像可以说所有的条都具有相同的颜色和不同的不透明度。

旋转

让我们应用一个旋转动画来获取我们的加载器。 请注意，我们需要一个步进动画而不是连续动画，这就是我使用的原因 steps(8). 8 只不过是条的数量，因此可以根据使用的条数更改该值。

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

而已！ 我们的加载器只有一个元素和几行 CSS。 我们可以通过调整一个值来轻松控制它的大小和颜色。

由于我们只使用了 ::before 伪元素，我们可以通过使用添加四个条 ::after 以总共 12 个小节和几乎相同的代码结束：

我们更新我们的伪元素的旋转来考虑 30deg 和 60deg 而不是 45deg 同时使用十二步动画，而不是八步。 我也将高度降低到 5% 而不是 8% 使酒吧更薄一点。

还要注意，我们有 grid-area: 1/1 关于伪元素。 这使我们可以将它们放置在彼此相同的区域中，彼此堆叠。

你猜怎么着？ 我们可以使用另一个实现来获取相同的加载器：

你能弄清楚代码背后的逻辑吗？ 这是一个提示：不再使用 CSS 处理不透明度 mask 但在渐变内部并且也在使用 opacity 属性。

为什么不用点呢？

我们完全可以做到：

如果您检查代码，您会发现我们现在使用的是径向渐变而不是线性渐变。 否则，这个概念与蒙版产生不透明印象的概念完全相同，但我们将形状制作为圆形而不是线条。

下图说明了新的渐变配置：

如果您使用的是 Safari，请注意演示可能有问题。 这是因为 Safari 目前缺乏对 at 径向渐变中的语法。 但是我们可以稍微重新配置梯度来克服这个问题：

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

更多加载器示例

这是与前一个类似的微调加载器的另一个想法。

对于这个，我只靠 background 和 mask 创建形状（不需要伪元素）。 我还在使用 CSS 变量定义配置，以便能够从相同的代码创建许多变体——这是 CSS 变量强大功能的另一个示例。 我写了另一篇关于这种技术的文章 如果您想了解更多详细信息。

请注意，某些浏览器仍然依赖于 -webkit- 前缀为 mask-composite 具有自己的一组值，并且不会在演示中显示微调器。 这是一种方法 也完全不需要 mast-composite 以获得更多浏览器支持。

我还有一个给你：

对于这个，我使用的是 background-color 控制颜色，并使用 mask 和 mask-composite 创建最终形状：

在我们结束之前，这里有一些我不久前制作的旋转装载机。 我依赖于不同的技术，但仍然使用渐变、蒙版、伪元素等。弄清楚每种技术的逻辑并同时学习新技巧可能是一个很好的练习。 这就是说，如果您对它们有任何疑问，请在下方评论部分。

结束了

看，我们可以在 CSS 中做很多事情，只需要一个 div、几个渐变、伪元素、变量。 看起来我们创造了一大堆不同的旋转装载机，但它们基本上都是一样的，只是稍作修改。

这只是一个开始。 在本系列中，我们将研究更多创建 CSS 加载器的想法和高级概念。

---

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

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