如何创建 - CSS 加载器
了解如何使用 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-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;
}
亲自试一试 »
另一个实例
如何将加载器放置在页面中间并在加载完成时显示“页面内容”的示例:
