CSS 实现漂亮圆形加载动画

.loader {
  border: 10px solid rgba(0, 0, 0, 0.1);
  border-top-color: #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

该动画使用一个 div 元素，并通过 CSS 设置其样式。边框设置为 10 像素宽，颜色为半透明黑色（0.1 的 alpha 值），圆角半径设置为 50%（形成圆形）。宽和高都设置为 50 像素，使其成为正圆。

定义了一个名为 'spin' 的关键帧动画，该动画将 div 元素旋转 360 度。最后，将动画应用于 div 元素，使其无限循环旋转。边框顶部颜色设置为 #3498db，一种漂亮的蓝色，使其更具动态和吸引力。