SOURCE

<div class="loading">
  加载中
  <span class="dot">
  </span>
</div>

.loading {
  color: green;
}

.loading .dot {
  display: inline-block;
  height: 4px;
  width: 10px;
  background-size: 2px 2px;
  background-repeat: no-repeat;
  background-position: 0px bottom, 4px bottom, 8px bottom;
  animation: loading 3s linear infinite forwards;
  /* outline:1px solid blue; */
}

@keyframes loading {
  33% {
    background-image: linear-gradient(to right, currentcolor, currentcolor);
    background-position: 0px bottom, 4px bottom, 8px bottom;
  }
  66% {
    background-image: linear-gradient(to right, currentcolor, currentcolor), linear-gradient(to right, currentcolor, currentcolor);
    background-position: 0px bottom, 4px bottom, 8px bottom;
  }
  99% {
    background-image: linear-gradient(to right, currentcolor, currentcolor), linear-gradient(to right, currentcolor, currentcolor), linear-gradient(to right, currentcolor, currentcolor);
    background-position: 0px bottom, 4px bottom, 8px bottom;
  }
}