如何创建仅使用 CSS 的加载微调器 💫🔥

加载旋转器效果怎么样？我知道我很喜欢，所以今天我们来用 CSS 做一个。做法很简单，你可以轻松地把它们添加到你自己的 Web 项目中 🙂

视频教程

与往常一样，如果您更喜欢视频形式的教程，欢迎在这里观看，或者在我的 YouTube 频道dcode上观看

源代码

如果您想跟随代码，请看这里：

编写 HTML

对于 HTML，我们将添加一个示例<div>，它将充当加载器的容器。在实际应用中，这将是内容加载后存放的空间。

在容器内部，我们还有另一个<div>代表实际加载的旋转器。

<div style="width: 150px; height: 150px;">
    <div class="loading loading--full-height"></div>
</div>

这就是 HTML 的内容！

现在来看看 CSS...

为了实现旋转效果，我们将利用CSS 动画和伪元素。

首先，我们可以对.loading类进行样式设置：

.loading {
    display: flex;
    justify-content: center;
}

我们display: flex在这里使用它，这样我们就可以轻松地将旋转器水平和垂直居中。

接下来我们利用:after伪元素来表示加载器。

.loading::after {
    content: "";
    width: 50px;
    height: 50px;
    border: 10px solid #dddddd;
    border-top-color: #009579;
    border-radius: 50%;
    animation: loading 1s ease infinite;
}

通过使用顶部边框（ ）与的border-top-color组合，我们在伪元素的顶部创建一个半圆形轮廓，如下所示：border-radius50%

在最后一行，我们指定loading动画应用于旋转器，并且它应该无限运行。现在让我们创建这个动画。

@keyframes loading {
    to {
        transform: rotate(1turn);
    }
}

就这样！我们完成了一个非常简单的纯 CSS 加载旋转器。如果你喜欢这篇教程，可以查看我的个人资料或 YouTube 频道dcode了解更多😁