You are currently viewing How to Create Waving Loading Page with CSS & HTML | web design
loading waving image

How to Create Waving Loading Page with CSS & HTML | web design

Waving Loading Page: In this lesson we will create a vertical waving loading page. The code will be only pure CSS and HTML only. You will be able to download the code at the bottom of this page.

This post follow this order:

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

Lesson 04

This is a YouTube Video Explains the Same Post Topic:

https://youtu.be/ar_waut-GxM

Creating the HTML file and code:

Lets create an HTML file with “loading4.html” name. Then we will add the following 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>

<div class="center">
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
    <div class="line line4"></div>
    <div class="line line5"></div>
    <div class="line line6"></div>
    <div class="line line7"></div>
    <div class="line line8"></div>
    <div class="line line9"></div>
    <div class="line line10"></div>
</div>
</body>
</html>

Here we created 10 lines with “line” class and with line+NO to control each line separately.

Creating the CSS file and code:

Now we will create the CSS file with “style.css” name. Then we will add the following code:

body{
    padding: 0;
    margin: 0;
    background: #073327;
}
.center{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.line{
    width: 180px;
    height: 6px;
    margin:5px 0;
    background: #20ffff;
    display: flex;
    transform-origin: bottom center;
    animation: animate 1.3s ease-in-out infinite;
}
.line1{
    animation-delay: 1.0s;
}
.line2{
    animation-delay: .9s;
}
.line3{
    animation-delay: .8s;
}
.line4{
    animation-delay: .7s;
}
.line5{
    animation-delay: .6s;
}
.line6{
    animation-delay: .50s;
}
.line7{
    animation-delay: .4s;
}
.line8{
    animation-delay: .3s;
}
.line9{
    animation-delay: .2s;
}
.line10{
    animation-delay: .1s;
}

@keyframes animate {
    0%{
        transform: scaleX(0.1);
        background: #20ffff;
    }
    50%{
        transform: scaleX(1);
        background: #3e61ff;
    }
    100%{
        transform: scaleX(0.1);
        background:transparent;
    }
}

Here we added the body background and override the browser default padding and margin:

body{
    padding: 0;
    margin: 0;
    background: #073327;
}

The we added the center class which will control the position of the elements:

.center{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

After that we added the line class code which will control the .style of the lines over there.


.line{
    width: 180px;
    height: 6px;
    margin:5px 0;
    background: #20ffff;
    display: flex;
    transform-origin: bottom center;
    animation: animate 1.3s ease-in-out infinite;
}

Now here we delayed the animation time of the elements, we delayed each line to begin before the other:

.line1{
    animation-delay: 1.0s;
}
.line2{
    animation-delay: .9s;
}
.line3{
    animation-delay: .8s;
}
.line4{
    animation-delay: .7s;
}
.line5{
    animation-delay: .6s;
}
.line6{
    animation-delay: .50s;
}
.line7{
    animation-delay: .4s;
}
.line8{
    animation-delay: .3s;
}
.line9{
    animation-delay: .2s;
}
.line10{
    animation-delay: .1s;
}

Finally we added the key-frames of the animation that we have:

@keyframes animate {
    0%{
        transform: scaleX(0.1);
        background: #20ffff;
    }
    50%{
        transform: scaleX(1);
        background: #3e61ff;
    }
    100%{
        transform: scaleX(0.1);
        background:transparent;
    }
}

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