Filling Water : Here in this lesson we will generate a loading page as a filling water which could be used as a loading page in your website. The code is in pure CSS and you could download your code copy at the bottom of this post.
This post follow this order:
- Creating an HTML file and adding HTML code.
- Creating the CSS style and adding our design style.
Lesson 07
This Video Explain the Same of this Post Content:
Creating an HTML file and adding HTML code:
First we will create an HTML empty file and name it loading7.html this file code will be as the following:
<!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="loader"></div>
</body>
</html>The previous code contain only a loader class which we will control its content at the style file. And also it contain the style sheet linking code.
Creating the CSS style and adding our design style:
Here we will firstly create a style sheet file and name it as style.css. Then we will add this code:
body{
margin: 0;
padding: 0;
background-color: #1a1a1a;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
}
.loader{
position: relative;
width: 250px;
height: 250px;
background-color: #299acf;
border-radius: 50%;
box-shadow: #000;
}
.loader:before{
content: '';
position: absolute;
top:-150%;
left: -50%;
width: 200%;
height: 200%;
border-radius: 40%;
background-color: #1a1a1a;
opacity: .7;
animation: animate 10s linear infinite;
}
@keyframes animate {
0%{
transform: rotate(0deg);
width: 250%;
height: 250%;
}
100%{
transform: rotate(360deg);
width: 100%;
height: 100%;
}
}The first block of style file is controlling the body margin and padding. Also it controls the position of the content to be in the middle of the screen:
body{
margin: 0;
padding: 0;
background-color: #1a1a1a;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
}Then we added the .loader class which will add the circle in the middle of the screen which have 250px as a size and border-radius 50% to be like a circle.
.loader{
position: relative;
width: 250px;
height: 250px;
background-color: #299acf;
border-radius: 50%;
box-shadow: #000;
}Then here we added object which will be a rectangle with high radius angles and then we will add an animation that will help this rectangle to round and create the waving of our animation.
.loader:before{
content: '';
position: absolute;
top:-150%;
left: -50%;
width: 200%;
height: 200%;
border-radius: 40%;
background-color: #1a1a1a;
opacity: .7;
animation: animate 10s linear infinite;
}
Finally we added the animation time of the soft rectangle that we have added:
@keyframes animate {
0%{
transform: rotate(0deg);
width: 250%;
height: 250%;
}
100%{
transform: rotate(360deg);
width: 100%;
height: 100%;
}
}
You could download the code from this button:
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
