🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS加载动画模板：旋转的圆形和条形加载效果

📝 用途

此模板用于创建加载中的旋转器，例如旋转的圆形或条形动画。

演示 GIF

加载中...

📘 解释

此代码使用 `@keyframes` 创建旋转的圆形（`spinner-circle`）和滑动条（`spinner-bar`）。你可以根据需要调整动画的速度和颜色。

🔹 部分代码

<style>
  /* 旋转圆形 */
  .spinner-circle {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
  }

  /* 旋转条形 */
  .spinner-bar {
    width: 50px;
    height: 5px;
    background-color: #3498db;
    animation: bar 1s infinite alternate;
  }

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

  @keyframes bar {
    0% { width: 0; }
    50% { width: 50px; }
    100% { width: 0; }
  }
</style>

💻 完整代码

<div class="spinner-circle"></div>

<div class="spinner-bar"></div>

<style>
  /* 旋转圆形 */
  .spinner-circle {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
  }

  /* 旋转条形 */
  .spinner-bar {
    width: 50px;
    height: 5px;
    background-color: #3498db;
    animation: bar 1s infinite alternate;
  }

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

  @keyframes bar {
    0% { width: 0; }
    50% { width: 50px; }
    100% { width: 0; }
  }
</style>
已复制！

🌀 加载动画旋转图的实用技巧

使用 CSS 动画制作的加载旋转图是重要的用户界面元素，有助于让用户在等待时感到舒适。通过适当的定制，可以实现符合品牌形象的效果。

🎨 设计定制

在基本的旋转动画基础上，将 border-top-color 改为渐变色，可以营造现代感。此外，添加 animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1) 会使动画更自然。颜色不仅限于 #3498db（蓝色），还可以根据网站主题色进行调整。

⏱️ 性能优化

为了保持动画流畅，建议添加 will-change: transform 属性。当显示多个旋转图时，错开 animation-delay 会产生视觉上更丰富的交错效果。

📱 响应式设计

在移动设备上，缩小尺寸（width: 30px）并缩短动画时长（animation-duration: 1s）可以实现紧凑高效的显示。对于深色背景主题，应将 border-color 调整为较亮的颜色。

加载旋转图是提升用户体验的重要元素，但应注意避免过度复杂或显示时间过长。设计应简洁明了，并与网站整体氛围相协调。

相关模板