CSS--Loading加载动画

.loader{
  display: flex;
  justify-content: center;
}
.loader div{
  width: 10px;
  height: 10px;
  margin: 3rem 0.2rem;
  background: black;
  border-radius: 50%;
  animation: loader 0.6s infinite alternate
}
.loader div:nth-child(2){
  animation-delay: 0.2s
}
.loader div:nth-child(3){
  animation-delay: 0.4s
}
@keyframes loader{
  to{
    opacity: 0.1;
    transform: translate3d(0,-16px,0)
  }
}

<div class="loader">
  <div></div>
  <div></div>
  <div></div>
</div>