How to Create a Swinging Loading Page with Pure CSS & HTML? | Web Design
swinging lines as loading web page

How to Create a Swinging Loading Page with Pure CSS & HTML? | Web Design

Swinging Loading Page: In this lesson we will create a swinging rectangles as loading page. The code will be pure CSS and HTML. You could download the code from the download button in this post bottom.

This lesson will go in this order:

  • Creating an HTML file and adding HTML code.
  • Creating the CSS style and adding our design style.

Lesson 05

Here is a Video for More Info about this Lesson:

https://youtu.be/cBybVXghGXc

Creating an HTML file and adding HTML code:

First of all we will need to create the HTML file and I will name it loading5.html. Then I will add the following code inside it.

<!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="box"></div>
<div class="box2"></div>
<div class="circle"></div>
</div>
</body>
</html>

The previous code contains a link to the style sheet file:

    <link href="style.css" type="text/css" rel="stylesheet">

And also contain a .center class inside an HTML div element to control the position of the HTML elements. and tow other divs to holds the rectangle for swinging. And finally a circle to pointed in the middle:

<div class="center">
<div class="box"></div>
<div class="box2"></div>
<div class="circle"></div>
</div>

Creating the CSS style and adding our design style:

Now we will create a stylesheet file that will hold our styles for our design. This file I will name it as “Style.css” and its code will be as this:

body{
    margin:0;
    padding: 0;
    background-color: #042e1f;
}
.center{
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    width: 120px;
    height: 120px;
}

.box,.box2{
    position: absolute;
    width: 15px;
    height: 130px;
    border-radius: 5px;
    background-color: #e49823;
    animation: animate1 2s linear infinite;
}
.box2{
    background-color: #0fc4e4;
    animation: animate2 2s linear infinite;

}
.circle{
    position: absolute;
    top:60px;
    left:2px;
    border-radius: 50%;
    background-color: #e49823;
    width: 12px;
    height: 12px;
}

@keyframes animate1 {
    0%{
        transform: rotate(0);
    } 20%{
        transform: rotate(-72deg);
    } 40%{
        transform: rotate(-144deg);
    } 60%{
        transform: rotate(-216deg);
    } 80%{
        transform: rotate(-288deg);
    } 100%{
        transform: rotate(-360deg);
    }
}
@keyframes animate2 {
    0%{
        transform: rotate(0);
    } 20%{
        transform: rotate(72deg);
    } 40%{
        transform: rotate(144deg);
    } 60%{
        transform: rotate(216deg);
    } 80%{
        transform: rotate(288deg);
    } 100%{
        transform: rotate(360deg);
    }
}

Here we have modified the default browser padding and margin values:

body{
    margin:0;
    padding: 0;
    background-color: #042e1f;
}

Over here we have added the center position for the HTML content:

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

Here in this code we added the color and position of the rectangle we have and we added the animation of both poxes:

.box,.box2{
    position: absolute;
    width: 15px;
    height: 130px;
    border-radius: 5px;
    background-color: #e49823;
    animation: animate1 2s linear infinite;
}

Then we changed only one element (one box) color and animation to animate at the opposite direction:

.box2{
    background-color: #0fc4e4;
    animation: animate2 2s linear infinite;

}

Before the last step we added the circle style which will stand in the middle of the swinging boxes:

.circle{
    position: absolute;
    top:60px;
    left:2px;
    border-radius: 50%;
    background-color: #e49823;
    width: 12px;
    height: 12px;
}

finally we added the animation code for both of the rectangle we have:

@keyframes animate1 {
    0%{
        transform: rotate(0);
    } 20%{
        transform: rotate(-72deg);
    } 40%{
        transform: rotate(-144deg);
    } 60%{
        transform: rotate(-216deg);
    } 80%{
        transform: rotate(-288deg);
    } 100%{
        transform: rotate(-360deg);
    }
}
@keyframes animate2 {
    0%{
        transform: rotate(0);
    } 20%{
        transform: rotate(72deg);
    } 40%{
        transform: rotate(144deg);
    } 60%{
        transform: rotate(216deg);
    } 80%{
        transform: rotate(288deg);
    } 100%{
        transform: rotate(360deg);
    }
}

I hope the code is easy and simple we have explained many lessons as it in previous lessons.

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