用css实现一个loading效果

用css画出的loading

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #59a782;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: donut-spin 1.2s linear infinite;
}

@keyframes donut-spin { … }: 这是一个关键帧动画的定义，命名为 donut-spin。它描述了动画从开始到结束的状态变化。

0% { transform: rotate(0deg); }: 动画开始时（0%），元素不进行旋转，即 transform 属性设置为 rotate(0deg)，表示不进行旋转。

100% { transform: rotate(360deg); }: 动画结束时（100%），元素经过 360 度的旋转，即 transform 属性设置为 rotate(360deg)，表示完全旋转一圈。

.donut { … }: 这是一个 CSS 选择器，用于选择具有 donut 类的元素。

display: inline-block;: 将该元素设置为内联块级元素，使其既具有块级元素的特性（可以设置宽度、高度等），又可以像内联元素一样在一行内排列。

border: 4px solid rgba(0, 0, 0, 0.1);: 设置边框为 4 像素宽度、实心、颜色为黑色的边框，并且边框的透明度为 0.1。

border-left-color: #59a782;: 设置左边框的颜色为 #59a782，即一种绿色。

border-radius: 50%;: 设置边框的圆角为 50%，使元素呈现为圆形。

width: 100px; height: 100px;: 设置元素的宽度和高度为 100 像素，使其呈现为一个正方形。

animation: donut-spin 1.2s linear infinite;: 应用名为 donut-spin 的动画效果，持续时间为 1.2 秒，采用线性运动曲线，并且设置为无限循环。