SOURCE

<div class="load-box">
  <div class="loading">
  </div>
  <div class="progress-box">
    <div>
      80%
    </div>
    <div class="progress">
      正在加载...
    </div>
  </div>
</div>

.load-box {
  width: 128px;
  height: 128px;
  position: relative;
}

.loading {
  position: absolute;
  background: url(https://i.imgur.com/YbfqQr8.png) 0 0;
  background-size: 128px 128px;
  width: 128px;
  height: 128px;
  animation: run 4s linear infinite;
}

@keyframes run {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

.progress-box {
  width: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: inherit;
  justify-content: center;
}

.progress {
  font-size: 14px;
  position: relative;
}



.play {
  animation: rot 4s linear infinite;
}

@keyframes rot {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}