使用纯 CSS 创建加载旋转器。步骤 1 - HTML 步骤 2 - 添加基本样式。步骤 3 - 添加旋转动画

2025-06-04

使用纯 CSS 创建加载旋转器。

步骤 1 - HTML

第 2 步 - 添加基本样式。

步骤 3 - 添加旋转动画

大家好！在本快速教程中，我们将学习如何使用纯 CSS 通过 3 个简单步骤创建加载旋转器！

步骤 1 - HTML

创建我们需要的 HTML 结构（只有 1 行）

<div class="spinner"></div>
Enter fullscreen mode Exit fullscreen mode

第 2 步 - 添加基本样式。

.spinner{
        width: 64px;
        height: 64px;
        border: 8px solid;
        border-color: #3d5af1 transparent #3d5af1 transparent;
        border-radius: 50%;
        animation: spin 1.2s linear infinite;
}
Enter fullscreen mode Exit fullscreen mode

步骤 3 - 添加旋转动画

 @keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
Enter fullscreen mode Exit fullscreen mode

就这样！我们创建了加载旋转器。这是最终结果。

旋转器

谢谢你😀

文章来源：https://dev.to/devggaurav/create-a-loading-spinner-using-pure-css-4o80
Devto 翻译
PREV
通过构建简单的东西来学习 CSS 伪元素 - 第 1 部分：按钮和链接悬停效果。
NEXT
为什么你应该使用 GatsbyJs 以及什么时候不使用它 感谢您的阅读，我是 Tharun Shiv，又名开发人员 Tharun