加载器

---

了解如何使用 CSS 创建预加载器。

---

如何创建加载器

亲自试一试 »

---

步骤 1) 添加 HTML:

实例

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

步骤 2) 添加 CSS:

实例

.loader {
  border: 16px solid #f3f3f3; /* 浅灰色 */
  border-top: 16px solid #3498db; /* 蓝色 */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 亲自试一试 »

实例解析

border 属性指定加载器的边框大小和边框颜色。 border-radius 属性将加载器转换为圆形。

在边框内旋转的蓝色物体由 border-top 属性指定。您还可以包括 border-bottom、border-left 和/或 border-right 如果您想要更多"旋转器"（参见下面的示例）。

加载器的大小由 width 和 height 属性指定。

最后，我们添加了一个动画，它让蓝色的东西以2秒的动画速度永远旋转。

注意:您还应该为不支持动画和变换属性的浏览器添加 -webkit- 前缀。点击示例查看方法。

---

---

添加更多

实例

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
} 亲自试一试 »

实例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
} 亲自试一试 »

实例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
} 亲自试一试 »

---

另一个实例

如何将加载器放置在页面中间并在加载完成时显示“页面内容”的示例:

实例

亲自试一试 »