Looping Circles: In this lesson we will understand how to create a looping circles as a loading page. The code will be in pure css code. Download the code at safhatech.com at this lesson post.
This lesson is a part of an animated loading page course. These lessons is supported with: SAFHATECH.COM.
You could see the other videos and lessons by going to safhatech.com and going to categories. From the navigation bar and then loading at design.
The order of this lesson is like this:
- Creating empty HTML file then add HTML code.
- Creating empty style-sheet file and then adding CSS style.
Lesson 22
This Video explain the same topic:
Creating empty HTML file then add HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="center">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>Creating empty style-sheet file and then adding CSS style:
body{
padding: 0;
margin: 0;
background-color: #0a4544;
}
.center{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
.loading{
width: 100px;
height: 100px;
animation: anim 1s linear infinite;
}
.loading span{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
}
.loading span:nth-child(1){
top:25%;
left: 25%;
background-color: #ae1b06;
}
.loading span:nth-child(2){
top:25%;
right: 25%;
background-color: #3b9233;
}
.loading span:nth-child(3){
bottom:25%;
left: 25%;
background-color: #294287;
}
.loading span:nth-child(4){
bottom:25%;
right: 25%;
background-color: #b4a20c;
}
@keyframes anim {
0%{
width: 100px;
height: 100px;
}
20%{
width: 100px;
height: 100px;
}
30%{
width: 150px;
height: 150px;
transform: rotate(60deg);
}
50%{
width: 250px;
height: 250px;
transform: rotate(15deg);
} 100%{
width: 100px;
height: 100px;
}
}
Finally: You could Download the code from here:Download Code
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
