In this video I go over how to create a loading dot animation using only HTML & CSS. I show you how to create a keyframe animation that modifies an element's scale and color. I use nth-child to then specify an animation delay to create a cool Quick & Easy CSS Loaders.

it is very easy loading animation and new css effect 2022

index.html:

<div class="loader-holder">
  <div class="block purple-block"></div>
  <div class="block yellow-block"></div>
  <div class="block red-block"></div>
  <div class="block blue-block"></div>
  <div class="block green-block"></div>
</div>

Style.css :

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');

body {
  background-color: #e8e8e8;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
    height: 100vh;
}

.loader-holder {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.block {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 5px;
  position: relative;
  animation: block-animation 1.5s infinite ease-in-out;
}

.block:nth-child(1) {animation-delay: 0.030s;}
.block:nth-child(2) {animation-delay: calc(0.030s * 2);}
.block:nth-child(3) {animation-delay: calc(0.030s * 3);}
.block:nth-child(4) {animation-delay: calc(0.030s * 4);}
.block:nth-child(5) {animation-delay: calc(0.030s * 5);}

.purple-block {background-color: #7d55f5;}
.yellow-block {background-color: #f4950c;}
.red-block {background-color: #f2512d;}
.blue-block {background-color: #4460f1;}
.green-block {background-color: #0bc466;}

@keyframes block-animation {
  0% {
    margin-top: 0;
  }
 
  30% {
    margin-top: -150px;
  }
 
  50% {
    margin-top: -150px;
  }
 
  80% {
    margin-top: 0;
  }
 
  100% {
    margin-top: 0;
  }
}

Please Like - Follow & Subscribe us: ►Website: devcraw.blogspot.com/ ►Pinterest: https://www.pinterest.com/devcrawcoding/ ► Facebook: https://facebook.com/crawdev ► Twitter: https://twitter.com/devcraw ► Instagram: https://www.instagram.com/crawdev