<div class="loader"></div>
.loader {
/* 设置 loader 元素的宽度和高度为 56 像素。 */
width: 56px;
height: 56px;
/* 将 loader 元素的边框半径设置为 50%,使其呈现圆形 */
border-radius: 50%;
/* 设置 loader 元素的边框样式为 6 像素宽的实线边框,边框颜色为 #f5f7fa(浅蓝色)。 */
border: 6px solid #f5f7fa;
/* 设置 loader 元素顶部边框的颜色为 #005cbf(深蓝色),这将创建一个从浅蓝色到深蓝色的渐变效果。 */
border-top-color: #0052D9;
/* 使用 spin 关键帧动画,持续时间为 1.5 秒,线性过渡,无限循环。这将使 loader 元素以线性方式旋转。 */
animation: spin 5s linear infinite;
}
/* 定义了一个名为 spin 的关键帧动画。 */
@keyframes spin {
/* 表示动画的起始状态。 */
0% {
/* 将元素的旋转角度设置为 0 度,即不旋转 */
transform: rotate(0);
}
/* 表示动画的结束状态 */
100% {
/* 将元素的旋转角度设置为 360 度,即一圈完整的旋转 */
transform: rotate(360deg);
}
}