Infinite Scroll (1) Loader with HTML and CSS (bounce animation)

 

이 포스트는 Udemy 20 Web Projects With Vanila Javascript 보고 정리하는 내용입니다

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

20 Web Projects With Vanilla JavaScript

 

 

 

 

 

 

로딩할 때 움직이는 점 3개 

다른 이미지 파일 사용하지 않고

HTML, CSS로만 만들기

 

 

 

 

1. HTML

 

    <div id="loader" class="loader">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>

 

 

 

2. CSS

.loader {
  opacity: 0;
  display: flex;
  position: fixed;
  bottom: 50px;
  transition: opacity 0.3s ease-in;
}

.loader.show {
  opacity: 1;
}

.circle {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 5px;
  animation: bounce 0.5s ease-in infinite;
}

.circle:nth-of-type(2) {
  animation-delay: 0.1s;
}

.circle:nth-of-type(3) {
  animation-delay: 0.2s;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}