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
0 Comments