巧妙使用 CSS3 实现 HTML 加载动画

<div class="DIV_loadingAnimation1">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

<div class="DIV_loadingAnimation2">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

<div class="DIV_loadingAnimation3">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

<style>
.DIV_loadingAnimation1 {
   position: relative;
   margin: 20px auto;
   width: 100px;
   height: 100px;
   box-shadow: 0 0 2px 0 rgba(0,0,0,.5);
   user-select: none;
}

   .DIV_loadingAnimation1 div {
       width: 18px;
       height: 4px;
       background: #27b6df;
       transform-origin: 100%;
       position: absolute;
       opacity: 0;
       border-radius: 25%;
   }

       .DIV_loadingAnimation1 div:nth-child(1) {
           animation: loadingAnimation1 1s linear infinite;
           transform: rotate(0deg);
           left: 21px;
           top: 50px;
       }

       .DIV_loadingAnimation1 div:nth-child(2) {
           animation: loadingAnimation1 1s linear infinite .08s;
           transform: rotate(30deg);
           left: 23px;
           top: 45px;
       }

       .DIV_loadingAnimation1 div:nth-child(3) {
           animation: loadingAnimation1 1s linear infinite .16s;
           transform: rotate(60deg);
           left: 27px;
           top: 41px;
       }

       .DIV_loadingAnimation1 div:nth-child(4) {
           animation: loadingAnimation1 1s linear infinite .24s;
           transform: rotate(90deg);
           left: 33px;
           top: 40px;
       }

       .DIV_loadingAnimation1 div:nth-child(5) {
           animation: loadingAnimation1 1s linear infinite .32s;
           transform: rotate(120deg);
           left: 39px;
           top: 41px;
       }

       .DIV_loadingAnimation1 div:nth-child(6) {
           animation: loadingAnimation1 1s linear infinite .41s;
           transform: rotate(150deg);
           left: 42px;
           top: 45px;
       }

       .DIV_loadingAnimation1 div:nth-child(7) {
           animation: loadingAnimation1 1s linear infinite .48s;
           transform: rotate(180deg);
           left: 43px;
           top: 50px;
       }

       .DIV_loadingAnimation1 div:nth-child(8) {
           animation: loadingAnimation1 1s linear infinite .56s;
           transform: rotate(210deg);
           left: 42px;
           top: 56px;
       }

       .DIV_loadingAnimation1 div:nth-child(9) {
           animation: loadingAnimation1 1s linear infinite .64s;
           transform: rotate(240deg);
           left: 38px;
           top: 59px;
       }

       .DIV_loadingAnimation1 div:nth-child(10) {
           animation: loadingAnimation1 1s linear infinite .72s;
           transform: rotate(270deg);
           left: 33px;
           top: 60px;
       }

       .DIV_loadingAnimation1 div:nth-child(11) {
           animation: loadingAnimation1 1s linear infinite .81s;
           transform: rotate(300deg);
           left: 28px;
           top: 59px;
       }

       .DIV_loadingAnimation1 div:nth-child(12) {
           animation: loadingAnimation1 1s linear infinite .9s;
           transform: rotate(330deg);
           left: 23px;
           top: 55px;
       }

@keyframes loadingAnimation1 {
   from {
       opacity: 1;
   }

   to {
       opacity: 0;
   }
}

.DIV_loadingAnimation2 {
   position: relative;
   margin: 20px auto;
   padding: 20px 0;
   width: 200px;
   text-align: center;
   box-shadow: 0 0 2px 0 rgba(0,0,0,.5);
   user-select: none;
   font-size: 0;
}

   .DIV_loadingAnimation2 div {
       width: 10px;
       height: 50px;
       background: #27b6df;
       display: inline-block;
       margin: 0 1px 0 0;
       transform: scaleY(.5);
   }

       .DIV_loadingAnimation2 div:nth-child(1) {
           animation: loadingAnimation2 1.5s linear infinite;
       }

       .DIV_loadingAnimation2 div:nth-child(2) {
           animation: loadingAnimation2 1.5s linear infinite .125s;
       }

       .DIV_loadingAnimation2 div:nth-child(3) {
           animation: loadingAnimation2 1.5s linear infinite .25s;
       }

       .DIV_loadingAnimation2 div:nth-child(4) {
           animation: loadingAnimation2 1.5s linear infinite .375s;
       }

       .DIV_loadingAnimation2 div:nth-child(5) {
           animation: loadingAnimation2 1.5s linear infinite .5s;
       }

       .DIV_loadingAnimation2 div:nth-child(6) {
           animation: loadingAnimation2 1.5s linear infinite .625s;
       }

       .DIV_loadingAnimation2 div:nth-child(7) {
           animation: loadingAnimation2 1.5s linear infinite .75s;
       }

       .DIV_loadingAnimation2 div:nth-child(8) {
           animation: loadingAnimation2 1.5s linear infinite .875s;
       }

@keyframes loadingAnimation2 {
   0% {
       transform: scaleY(.5);
   }

   20% {
       transform: scaleY(1);
   }

   40% {
       transform: scaleY(.5);
   }
}

.DIV_loadingAnimation3 {
   width: 100%;
   margin: 20px auto;
   padding: 20px 0;
   overflow: hidden;
   box-shadow: 0 0 2px 0 rgba(0,0,0,.5);
   user-select: none;
   font-size: 0;
}

   .DIV_loadingAnimation3 div {
       position: relative;
       background: #27b6df;
       display: inline-block;
       left: -50%;
       width: 20px;
       height: 20px;
   }

       .DIV_loadingAnimation3 div:nth-child(1) {
           animation: loadingAnimation3 cubic-bezier(0,1,1,.1) 2.75s infinite 1s;
       }

       .DIV_loadingAnimation3 div:nth-child(2) {
           animation: loadingAnimation3 cubic-bezier(0,1,1,.1) 2.75s infinite .75s;
       }

       .DIV_loadingAnimation3 div:nth-child(3) {
           animation: loadingAnimation3 cubic-bezier(0,1,1,.1) 2.75s infinite .5s;
       }

       .DIV_loadingAnimation3 div:nth-child(4) {
           animation: loadingAnimation3 cubic-bezier(0,1,1,.1) 2.75s infinite .25s;
       }

       .DIV_loadingAnimation3 div:nth-child(5) {
           animation: loadingAnimation3 cubic-bezier(0,1,1,.1) 2.75s infinite;
       }

@keyframes loadingAnimation3 {
   0% {
       left: -50%;
   }

   50% {
       left: 125%;
   }

   100% {
       left: 200%;
   }
}
</style>