使用box-shadow和animation实现一个loading动画

// 自定义loading样式
.custom-loader {
  display: inline-block;
  font-size: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-indent: -9999em;
  animation: load-effect 1s infinite linear;
}

@keyframes load-effect {
  0% {
    box-shadow: 0 -26px 0 0 #b1cbff, 26px 0 0 0 #d8e5ff, 0 26px 0 0 #6498ff, -26px 0 0 0 #8bb2ff;
  }

  25% {
    box-shadow: 26px 0 0 0 #d8e5ff, 0 26px 0 0 #6498ff, -26px 0 0 0 #8bb2ff, 0 -26px 0 0 #b1cbff;
  }

  50% {
    box-shadow: 0 26px 0 0 #6498ff, -26px 0 0 0 #8bb2ff, 0 -26px 0 0 #b1cbff, 26px 0 0 0 #d8e5ff;
  }

  75% {
    box-shadow: -26px 0 0 0 #8bb2ff, 0 -26px 0 0 #b1cbff, 26px 0 0 0 #d8e5ff, 0 26px 0 0 #6498ff;
  }

  100% {
    box-shadow: 0 -26px 0 0 #b1cbff, 26px 0 0 0 #d8e5ff, 0 26px 0 0 #6498ff, -26px 0 0 0 #8bb2ff;
  }
}