css loading动画

/* CSS Loading 动画示例 */

/* 定义一个加载动画的关键帧 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 定义加载动画的样式 */
.loader {
  border: 16px solid #f3f3f3; /* 设置边框颜色 */
  border-top: 16px solid #3498db; /* 设置顶部边框颜色 */
  border-radius: 50%; /* 将其变成圆形 */
  width: 120px; /* 设置宽度 */
  height: 120px; /* 设置高度 */
  animation: spin 2s linear infinite; /* 应用动画，2秒一圈，线性运动，无限循环 */
}

解释说明：

• @keyframes spin：定义了一个名为 spin 的关键帧动画，从 0% 开始旋转到 100% 时完成一圈（360度）。
• .loader：这是一个类选择器，用于定义加载动画的样式。它创建了一个圆形的元素，并通过设置不同的边框颜色来实现旋转效果。
• animation: spin 2s linear infinite：将 spin 动画应用到 .loader 元素上，动画持续时间为 2 秒，采用线性运动方式，并且无限循环。

你可以将这个 .loader 类应用到任何 HTML 元素上，例如 <div> 或 <span>，以显示加载动画。