Code Ready | Frontend

✅ Как создать loader на сайт?



Анимация довольно простая, но очень эффективная. Занимает немного строк кода в Html и Css. Всё что нужно, это создать keyframes анимацию и с помощью transform менять размер каждого блока в два раза. ⬇️

<div class="loader">

  <span class="loader__element"></span>

  <span class="loader__element"></span>

  <span class="loader__element"></span>

</div>

.loader {

  display: flex;

  align-items: center;

  justify-content: center;  

}

.loader__element {

  border-radius: 100%;

  border: 5px solid #555;

  margin: calc(5px *2);

}

.loader__element:nth-child(1) {

  animation: preloader .6s ease-in-out alternate infinite;

}

.loader__element:nth-child(2) {

  animation: preloader .6s ease-in-out alternate .2s infinite;

}

.loader__element:nth-child(3) {

  animation: preloader .6s ease-in-out alternate .4s infinite;

}

@keyframes preloader {

  100% { transform: scale(2); }

}

@code_ready | #практика #html #css