<style>

@-webkit-keyframes antSpinBlink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.12);
            transform: scale(0.12);
  }
}
@keyframes antSpinBlink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.12);
            transform: scale(0.12);
  }
}
.frog-spin-dot {
    display: inline-block;
    line-height: 0;
    font-size: 0;
}
.frog-spin-spinning {
    opacity: 1;
    position: static;
    display: inline-block;
}
.frog-spin-dot i {
    display: inline-block;
    width: 8px;
    height: 12px;
    background: #108EE9;
    border-radius: 2px 1px;
    margin: 0 2px;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.frog-spin-dot i:nth-child(2) {
    opacity: .4;
    -webkit-animation-delay: .125s;
    animation-delay: .125s;
}
.frog-spin-dot i:nth-child(3) {
    opacity: .12;
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
}


.frog-spin-dot-spin {
  -webkit-transform: skewX(-25deg);
      -ms-transform: skewX(-25deg);
          transform: skewX(-25deg);
}
.frog-spin-dot-spin i {
  -webkit-animation: antSpinBlink 0.5s infinite ease-in-out alternate;
          animation: antSpinBlink 0.5s infinite ease-in-out alternate;
}
</style>

<span class="frog-spin-dot frog-spin-dot-spin"><i></i><i></i><i></i></span>
<div class="frog-spin-text">数据加载中...</div>

演示效果