How to Create a Vertical Waving Loading Page? | Loading page
loading animation wave Image

How to Create a Vertical Waving Loading Page? | Loading page

Vertical Waving Loading Page: In this lesson we will create a vertical loading page that could be used for our website design when loading the resources. This loading animation could help the user to stay in your website if the website loading is delayed or if the network connection is weak. The coding is only CSS and HTML.

This lesson order goes as the following order:

  • Creating the HTML file and code.
  • Creating the CSS file and code.

Lesson 01

Here is a Video for More Info about this Lesson:

https://youtu.be/YjRPfKoTv5s

Creating the HTML file and code:

First of all we will create the HTML file and lets name it as “Loading1.html”. Then we will add it’s content code as this:

<!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="static"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="static"></div>
</div>
</body>
</html>

In the previous code we have added 10 lines the first and the last are static lines, means they will not animate. And the rest will be animated like the wave, here is the code:

<div class="center">
    <div class="static"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="static"></div>
</div>

Creating the CSS file and code:

Now we will create the CSS file and lets name it as “style.css”. This file will contain the style and the animation we need it.

The code of the CSS file:

body{
padding: 0;
margin: 0;
background: #185e38;
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    transform: rotate(90deg);
}

.line{
    width: 6px;
    height: 80px;
    background: white;
    margin: 0 3px ;
    border-radius: 10px;
    animation: animte 0.8s infinite;
}
.static{
    width: 6px;
    height: 80px;
    background: white;
    margin: 0 3px ;
    border-radius: 10px;
}

.line:nth-child(2){
    animation-delay: 0.1s;
}
.line:nth-child(3){
    animation-delay: 0.2s;
}
.line:nth-child(4){
    animation-delay: 0.2s;
}
.line:nth-child(5){
    animation-delay: 0.4s;
}
.line:nth-child(6){
    animation-delay: 0.5s;
}
.line:nth-child(7){
    animation-delay: 0.6s;
}
.line:nth-child(8){
    animation-delay: 0.7s;
}

@keyframes animte {
    0%{height: 0;}
    50%{height: 80px;}
    100%{height: 0;}
}

First we changed the default padding and margin to 0, and we changed the background color.

body{
padding: 0;
margin: 0;
background: #185e38;
}

Then we changed the content position to the center with position value= absolute and 50% from the top and left. Also we rotated the content to be vertical.


.center{
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    transform: rotate(90deg);
}

After that we changed the lines width and height and color. and added the animation of that lines.


.line{
    width: 6px;
    height: 80px;
    background: white;
    margin: 0 3px ;
    border-radius: 10px;
    animation: animte 0.8s infinite;
}

Here we gave the same code of the line class except the animation code, because the static lines will not have any animation.


.static{
    width: 6px;
    height: 80px;
    background: white;
    margin: 0 3px ;
    border-radius: 10px;
}

Then we created the delay for the lines to work as the wave one by one.


.line:nth-child(2){
    animation-delay: 0.1s;
}
.line:nth-child(3){
    animation-delay: 0.2s;
}
.line:nth-child(4){
    animation-delay: 0.2s;
}
.line:nth-child(5){
    animation-delay: 0.4s;
}
.line:nth-child(6){
    animation-delay: 0.5s;
}
.line:nth-child(7){
    animation-delay: 0.6s;
}
.line:nth-child(8){
    animation-delay: 0.7s;
}

Finally we added our animation code that will control our lines movement.

@keyframes animte {
    0%{height: 0;}
    50%{height: 80px;}
    100%{height: 0;}
}

Your 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