How to Make CSS Animation | Loading Animation
hello viewer, welcome to m-Softech. Today I will teach you how to make a Pure CSS loading animation without using of jQuery and JavaScript.
This artical is an introduction to coding cool CSS animations using HTML and CSS. It’s meant for those who already have a good understanding of HTML and CSS.
In this CSS loading animation we Using CSS keyframes, animation delays, and CSS transforms, we’ll create a simple yet interesting CSS animation. Let’s get started!
You have already seen many types of article in web but this is totally different to other I will explain you how we will use css3 and make a loading animation. it is very simple and very attractive loading animation. and also I am providing you all source code for that loading animation.
Stagger the motion using CSS animation delay
Using the same CSS as before, set the animation-delay property to be slightly offset for each element. This instantly makes the CSS animation dramatically more interesting.
HTML CODE
<!DOCTYPE html> <html> <head> <title>CSS Loader</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="animation-wrapper"> <div class="circle"><span>L</span></div> <div class="circle"><span>o</span></div> <div class="circle"><span>a</span></div> <div class="circle"><span>d</span></div> <div class="circle"><span>i</span></div> <div class="circle"><span>n</span></div> <div class="circle"><span>g</span></div> </div> </body> </html>
CSS Code
body{
background: #282923;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
}
.animation-wrapper{
width: 300px;
height: 100px;
position: absolute;
}
.circle{
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
background-color: #a2e22b;
animation: move-the-circle 1s infinite;
transform-origin: center center;
}
.circle span{
position: absolute;
top: -28px;
font-size: 20px;
color: white;
font-family: cursive;
left: 15px;
}
.circle:nth-child(1){left: 0px; animation-delay: 0.1s;}
.circle:nth-child(2){left: 30px; animation-delay: 0.2s;}
.circle:nth-child(3){left: 60px; animation-delay: 0.3s;}
.circle:nth-child(4){left: 90px; animation-delay: 0.4s;}
.circle:nth-child(5){left: 120px; animation-delay: 0.5s;}
.circle:nth-child(6){left: 150px; animation-delay: 0.6s;}
.circle:nth-child(7){left: 180px; animation-delay: 0.7s;}
@keyframes move-the-circle{
0%{transform: translate(0, 0);}
50%{transform: translate(0, 50px);}
100%{transform: translate(0, 0);}
}You Also Like This
Responsive CSS Flexible Box Layout | How To Make Flexbox Website Layout
How To Make a Resume Using HTML & CSS Only
You can Watch this video tutorial how to make CSS Loading Animation
Right here is the right website for anyone who would like to find out about this topic. You know so much its almost hard to argue with you (not that I really will need to…HaHa). You definitely put a fresh spin on a subject which has been discussed for decades. Great stuff, just great!