.spinner-small {
   display: inline-block;
   position: relative;
   width: 20px;
   height: 20px;
}

   .spinner-small div {
      animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      transform-origin: 32px 32px;
   }

      .spinner-small div:after {
         content: " ";
         display: block;
         position: absolute;
         width: 6px;
         height: 6px;
         border-radius: 50%;
         background: #fff;
         margin: -3px 0 0 -3px;
      }

      .spinner-small div:nth-child(1) {
         animation-delay: -0.036s;
      }

         .spinner-small div:nth-child(1):after {
            top: 50px;
            left: 50px;
         }

      .spinner-small div:nth-child(2) {
         animation-delay: -0.072s;
      }

         .spinner-small div:nth-child(2):after {
            top: 54px;
            left: 45px;
         }

      .spinner-small div:nth-child(3) {
         animation-delay: -0.108s;
      }

         .spinner-small div:nth-child(3):after {
            top: 57px;
            left: 39px;
         }

      .spinner-small div:nth-child(4) {
         animation-delay: -0.144s;
      }

         .spinner-small div:nth-child(4):after {
            top: 58px;
            left: 32px;
         }

      .spinner-small div:nth-child(5) {
         animation-delay: -0.18s;
      }

         .spinner-small div:nth-child(5):after {
            top: 57px;
            left: 25px;
         }

      .spinner-small div:nth-child(6) {
         animation-delay: -0.216s;
      }

         .spinner-small div:nth-child(6):after {
            top: 54px;
            left: 19px;
         }

      .spinner-small div:nth-child(7) {
         animation-delay: -0.252s;
      }

         .spinner-small div:nth-child(7):after {
            top: 50px;
            left: 14px;
         }

      .spinner-small div:nth-child(8) {
         animation-delay: -0.288s;
      }

         .spinner-small div:nth-child(8):after {
            top: 45px;
            left: 10px;
         }

   .spinner-small::before {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: 0 auto;
      width: 20px;
      height: 20px;
      animation: 1.5s linear infinite spinner;
      animation-play-state: inherit;
      border: solid 3px #cfd0d1;
      border-bottom-color: #00aac8;
      border-radius: 50%;
      content: "";
      transform: translate3d(-50%, -50%, 0);
      will-change: transform;
   }

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

   100% {
      transform: rotate(360deg);
   }
}