Animated Squire Shapes: In this lesson we will create an animated loading page. The code will be in pure css and HTML. You could download the code from the button at this post bottom. This lesson is one of the loading course lessons.
This post follow the following order:
- Create HTML CODE.
- Create CSS Code.
Lesson 12
In this Video we Explained “Animated Squire Shapes” Lesson:
Create HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="center">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>Create CSS Code:
body{
margin: 0;
padding: 0;
background-color: #0b3054;
}
.center{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
}
ul li{
list-style: none;
width: 40px;
height: 40px;
background-color: #ff00c1;
margin: 0 5px;
animation: animate 1.2s linear infinite;
}
@keyframes animate {
0%{
transform: translateY(0);
height: 40px;
}25%{
transform: translateY(0);
height: 40px;
}50%{
transform: translateY(-40px);
height: 60px;
}75%{
transform: translateY(0);
height: 40px;
}100%{
transform: translateY(0);
height: 40px;
}
}
ul li:nth-child(1){
animation-delay: 0s;
}
ul li:nth-child(2){
animation-delay: 0.20s;
}
ul li:nth-child(3){
animation-delay: 0.40s;
}
ul li:nth-child(4){
animation-delay: 0.60s;
}
ul li:nth-child(5){
animation-delay: 0.80s;
}Download Code from here:
Consequently You could follow us at :
Website URL: https://www.safhatech.com/
YouTube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw
Twitter: http:// https://twitter.com/safhatech
Instagram: https://www.instagram.com/safhatech
Facebook: http:// https://www.facebook.com/Safhatech-487171875443687
Phone: 967778283416
