figure {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 6.25em;
   height: 6.25em;
   margin: auto;
   /* animation: rotate 2.4s linear infinite; */
   background-image: url(/KeHuDingZhiBuGengXin/LoadingD.gif);
   background-size: 100% 100%;
 }

 .white {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: white;
   opacity: 0;
   animation: flash 2.4s linear infinite;
 }

 .dot {
   position: absolute;
   width: 1.8em;
   height: 1.8em;
   margin: auto;
   border-radius: 100%;
   transition: all 1s ease;
 }

 .dot:nth-child(2) {
   top: 0;
   bottom: 0;
   left: 0;
   background: #f56c6c;
   animation: dotsY 2.4s linear infinite;
 }

 .dot:nth-child(3) {
   top: 0;
   right: 0;
   left: 0;
   background: #e6a23c;
   animation: dotsX 2.4s linear infinite;
 }

 .dot:nth-child(4) {
   top: 0;
   right: 0;
   bottom: 0;
   background: #67c23a;
   animation: dotsY 2.4s linear infinite;
 }

 .dot:nth-child(5) {
   right: 0;
   bottom: 0;
   left: 0;
   background: #4e88f3;
   animation: dotsX 2.4s linear infinite;
 }

 @keyframes rotate {
   0% {
     transform: rotate(0);
   }

   10% {
     width: 6.25em;
     height: 6.25em;
   }

   66% {
     width: 1.8em;
     height: 1.8em;
   }

   100% {
     width: 6.25em;
     height: 6.25em;
     transform: rotate(360deg);
   }
 }

 @keyframes dotsY {
   66% {
     width: 1.8em;
   }

   77% {
     width: 0;
   }
 }

 @keyframes dotsX {
   66% {
     height: 1.8em;
   }

   77% {
     height: 0;
   }
 }

 @keyframes flash {
   33% {
     border-radius: 0;
   }

   55% {
     border-radius: 100%;
   }
 }