Loaders/Revolving Dots.html

<html>
  <head>
    <title>Revolving Dots | Loaders</title>
    <style>
      #loader {
        position: relative;
        width: 45px;
        height: 45px;
        margin: 60px auto 20px;
        animation: fullRotate 3s linear 600ms infinite;
      }

      @keyframes fullRotate {
        to { transform: rotate(720deg); }
      }

      #loader::before,
      #loader::after {
        position: absolute;
        width: 25px;
        height: 25px;
        content: "";
        background-color: hsl(200, 100%, 50%);
        border-radius: 50%;
        transform: scale(0);
        animation-name: pulseScale;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
      }

      @keyframes pulseScale {
        from, to { transform: scale(0); }
        50%      { transform: scale(1); }
      }

      #loader::before {
        top: 0;
        right: 0;
        animation-delay: 1600ms;
      }

      #loader::after {
        bottom: 0;
        left: 0;
        animation-delay: 600ms;
      }
    </style>
  </head>
  <body>
    <div id="loader"></div>
  </body>
</html>