加载球功能的实现

一、HTML部分

<div class="box">
    <span>0%</span>
</div>

其中span中内容为活数据

二、css部分

1.自定义动画部分

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

2.css部分

.box {
  position: relative;
  //居中效果，可删除
  margin: 50px auto;
  //宽度、高度(可自行修改)
  width: 200px;
  height: 200px;
  //圆球效果以及边框
  border-radius: 50%;
  border: 1px solid black;
  //将伪类元素的移除部分隐藏
  overflow: hidden;
  //文字效果(可自行修改)
  text-align: center;
  line-height: 200px;
  color: green;
}

//通过伪类元素实现效果
.box::after {
  //防止伪类元素覆盖box中的文字
  z-index: -1;
  //动画效果
  animation: rotate 3s linear;
  animation-iteration-count: infinite;
  content: '';
  left: -50px;
  display: block;
  position: absolute;
  border-radius: 110px;
  //top确定进度位置，根据box的高度进行修改
  top: 220px;
  //(以下可自行修改)
  width: 300px;
  height: 300px;
  background-color: skyblue;
}