loading dots animation

/*

Text to display
<div class="dot first"></div>
<div class="dot second"></div>
<div class="dot third"></div>
*/



.dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      background: lightgrey;
    }

    .first {
      animation: 0.5s linear 0s infinite alternate upAndDown;
    }

    .second {
      animation: 0.5s linear 0.2s infinite alternate upAndDown;
    }

    .third {
      animation: 0.5s linear 0.4s infinite alternate upAndDown;

    }

    @keyframes upAndDown{
      from {
          transform: translateY(0em);
      }

      to {
          transform: translateY(-0.3em);
      }
    }

    .main-text {
        /*color: black;*/
        font-size: 40px;
        margin-top: 50%;
    }