我用 HTML 和 CSS 构建了这 5 种类型的加载动画，您更喜欢哪一种？

作为一个热爱简洁 UI 设计和流畅动画的爱好者，我一直对加载状态的创意可能性着迷。从简洁的旋转器到充满活力的变形器，变化无穷。

因此，我最近挑战自己探索不同的加载样式，看看仅使用 HTML 和 CSS 可以制作多少独特而实用的动画。

经过大量的编码、灵感、涂鸦和色彩实验，我最终收集了 5 个独特的加载动画来分享。

想看看我想出的 5 个很酷的点子吗？

我们走吧。

动画 1：极简旋转器

有时候，加载动画的设计理念是“少即是多”。第一种风格运用极简的旋转线条，保持了干净简洁的风格。

代码：

HTML：



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

CSS：



.loader {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 3px solid #FF9900;
  border-radius: 50%;
  border-top-color: transparent;
  animation: rotate 1s infinite linear;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

它使用一个div带边框的元素来创建圆形轮廓，并border-top-color: transparent留出空隙以用于旋转线效果。然后animation将其旋转 360 度，以实现平滑的无限旋转。

结果：

用例：
这款简单的旋转器非常适合极简 UI 设计或紧凑空间环境下使用，尤其适合那些不希望加载状态过于突兀的情况。它微妙的旋转既能传达恰到好处的动态，又不会让人分心。

动画2：弹跳球

接下来这个加载动画既有趣又有弹性！它创造了一个上下弹跳的小球无限循环，为原本枯燥的加载过程注入了一些令人愉悦的动感。

代码：

HTML：



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

CSS：



.loader {
  width: 70px;
  height: 120px;
  margin: 0 auto;
  position: relative;
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #255426, #8bba8c);
  position: absolute;
  bottom: 0;
  left: 10px;
  animation: bounce 0.6s ease-in-out infinite alternate;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-70px); }
}

这里我使用 CSS 定位将球最初放在底部，然后animation使其在 0 到 -70px 之间垂直平移（移动）以产生弹跳效果。

结果：

用例：
我认为，由于弹跳球加载过程注入了一些有趣、好玩的动作，能够吸引眼球，因此它非常适合用来传达较长的加载过程，让你能够保持用户的参与度和兴趣。这种循环弹跳可以持续提醒用户数据仍在加载。

动画 3：变形的斑点

这个相当难，但我还是坚持下来了。它给人一种奇妙的有机、无定形的感觉。一个不断变形的球体在无限循环中无缝地在不同形态之间转换。

代码：

HTML：



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

CSS：



.loader {
  width: 100px;
  height: 100px;
  position: relative;
}

.blob {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #8EC5FC, #E0C3FC);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(142, 197, 252, 0.5);
  animation: morph 5s linear infinite;
}

@keyframes morph {
  0%, 100% {
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
  }

  33% {
    border-radius: 30% 70% 70% 30% / 30% 29% 71% 70%;
    transform: translate(-50%, -50%) rotate(90deg) scale(1.2); 
  }

  66% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: translate(-50%, -50%) rotate(180deg) scale(0.8);
  }
}

神奇之处在于@keyframes动画，我改变了border-radius并应用了不同的transform值，让水滴的形状随时间扭曲。背景渐变和盒子阴影营造出柔和的发光效果。

结果：

用例：
在您想要传达主动“形状变化”状态的情况下使用它，例如应用图像过滤器、更新数据可视化或处理图形密集型任务。

动画 4：脉冲点

这个加载器保持简单，但又具有视觉吸引力，通过几个脉冲点创造出涟漪般的波浪效果。

代码：

HTML：



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

CSS：



.loader {
  width: 100px;
  height: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ABB2B9;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:nth-child(1) {
  animation-delay: 0s;
  background: #EF476F;
}

.dot:nth-child(2) {
  animation-delay: 0.5s; 
  background: #FFD166;
}

.dot:nth-child(3) {
  animation-delay: 1s;
  background: #06D6A0;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

当我pulse用交错延迟动画进行编码时，奇迹真的发生了。每个点在不同的时间点放大和缩小，创造出这种层叠的脉冲序列。改变点的颜色增添了额外的视觉效果。

结果：

用例：
当你需要在较短的加载场景中提供一些简单的、微妙的视觉反馈时，这个效果会很好。它简洁、极简的图案不会让人感到压抑或分心，但仍能提示内容正在加载。它可以用于快速加载过渡，例如从 API 提取数据或部分页面渲染。

动画5：填充旋转正方形

这个装载机的填充动作令人非常满意，随着方块越来越接近完成，它也会让人充满期待。我的设计灵感来自一个 YouTube 短片，于是决定自己动手做一个，就像“像艺术家一样偷师”一样。

代码：

HTML：



<div class="loader">
  <div class="fill-box"></div>
</div>

CSS：



.loader {
  width: 50px;
  height: 50px;
  border: 2px solid #333;
  position: relative;
}

.fill-box {
  width: 100%;
  height: 100%;
  transform: rotate(0);
  background: conic-gradient(#39CCCC, #AA66CC, #39CCCC);
  animation: filling 1s infinite linear;
}

@keyframes filling {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

方形轮廓采用边框制作div，内部.fill-box采用旋转圆锥渐变背景，产生填充动画效果。

结果：

用例：
方形填充加载器明亮、大胆、直接 - 它能吸引您的注意力，使其适合您真正想要那种“看我加载！”体验的加载时间，例如启动应用程序或游戏、上传大文件或处理密集型任务。

包起来

以上就是5个加载动画演示的全部内容！我们涵盖了从酷炫简约到活力俏皮的各种风格。

但现在我想知道——你最喜欢哪一个？是极简主义的？可爱的弹力小球？还是那个不断变形、无定形的斑点？还是那个简单的脉动圆点图案？还是那个生动逼真、充满旋转的方块，完美满足了你对加载动画的渴望？

在评论区告诉我你的首选！当然，你也可以随意获取代码片段，构建你自己的混音版本。

文章来源：https://dev.to/peboy/i-built-these-5-types-of-loading-animation-in-html-and-css-which-do-you-prefer-2f3f