• html部分

<div class="loader">
  <div class="loader-bounce1"></div>
  <div class="loader-bounce2"></div>
  <div class="loader-bounce3"></div>
</div>

• css部分

.loader {
    text-align: center;
}

.loader,.loader>div {
    display: inline-block
}

.loader>div {
    width: 16px;
    height: 16px;
    background-color: #3bb4f2;
    -webkit-animation: amt-bouncedelay 1.4s infinite ease-in-out both;
    animation: amt-bouncedelay 1.4s infinite ease-in-out both;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

.loader>div+div {
    margin-left: 5px
}

.loader .loader-bounce1 {
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s
}

.loader .loader-bounce2 {
    -webkit-animation-delay: -.16s;
    animation-delay: -.16s
}

@-webkit-keyframes amt-bouncedelay {
    0%,80%,to {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes amt-bouncedelay {
    0%,80%,to {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

<div class="dot-loading-warp" id="dot-loading-warp">
    <div class="loader">
        <i class="dot-pink"></i>
        <i class="dot-blue"></i>
    </div>
</div>

/*-------------- 兩個(gè)點(diǎn)加載小動(dòng)畫   --------------*/
.dot-loading-warp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
}

.dot-loading-warp .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 12px;
    margin: -6px 0 0 -14px;
    background: transparent;
}

.dot-loading-warp .loader .dot-pink, .dot-loading-warp .loader .dot-blue{
    position: absolute;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    -webkit-animation: pink 1.5s ease infinite;
    animation: pink 1.5s ease infinite;
}

.dot-loading-warp .loader .dot-pink {
    background: #e77a7a;
    left: -2px;
}

.dot-loading-warp .loader .dot-blue {
    -webkit-animation-name: blue;
    animation-name: blue;
    background: #ffc54f;
    right: -2px;
}

@-webkit-keyframes pink { 
    0% {
    z-index: 100;
   }
   50% {
    z-index: 0;
    -webkit-transform: translateX(24px);
    transform: translateX(24px);
   }
}
@keyframes pink {
   0% {
    z-index: 100;
   }
   50% {
    z-index: 0;
    -webkit-transform: translateX(24px);
    transform: translateX(24px);
   }
}
@-webkit-keyframes blue {
   50% {
    z-index: 0;
    -webkit-transform: translateX(-24px);
    transform: translateX(-24px);
   }
}
@keyframes blue {
   50% {
    z-index: 0;
    -webkit-transform: translateX(-24px);
    transform: translateX(-24px);
   }
}