[animation]점3개 로딩 three dots loding

HTLM

<div class="examples" data-title="dot-falling">
  <div class="stage">
    <div class="dot-falling"></div>
  </div>
</div>

 CSS

/*  Dot Falling */
.examples {position: relative;background: #fff;width: auto;padding: 5% 10%;border-radius: 16px;}
.dot-falling {position: relative;left: -9999px;width: 8px;height: 8px;border-radius: 5px;background-color: #80ccff;color: #80ccff;box-shadow: 9999px 0 0 0 #80ccff;animation: dot-falling 1s infinite linear;animation-delay: 0.1s;    }
.dot-falling::before, .dot-falling::after {content: "";display: inline-block;position: absolute;top: 0;}
.dot-falling::before {width: 8px;height: 8px;border-radius: 5px;background-color: #80ccff;color: #80ccff;animation: dot-falling-before 1s infinite linear;animation-delay: 0s;}
.dot-falling::after {width: 8px;height: 8px;border-radius: 5px;background-color: #80ccff;color: #80ccff;animation: dot-falling-after 1s infinite linear;animation-delay: 0.2s;    }

@keyframes dot-falling {
  0% {
    box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%, 50%, 75% {
    box-shadow: 9999px 0 0 0 #80ccff;
  }
  100% {
    box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
  }
}
@keyframes dot-falling-before {
  0% {
    box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%, 50%, 75% {
    box-shadow: 9984px 0 0 0 #80ccff;
  }
  100% {
    box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
  }
}
@keyframes dot-falling-after {
  0% {
    box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%, 50%, 75% {
    box-shadow: 10014px 0 0 0 #80ccff;
  }
  100% {
    box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
  }
}

 

코드 확인

https://codepen.io/csvhixfk-the-scripter/pen/eYQWZWg