How to Create a Filling Water as Loading Background? | Pure CSS
Filling water as loading page

How to Create a Filling Water as Loading Background? | Pure CSS

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:

https://youtu.be/UkPqmY9gFV0

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

Leave a Reply