Rounded Loading Page Animation with Pure CSS & HTML | Web Design
Circle Looping loading page

Rounded Loading Page Animation with Pure CSS & HTML | Web Design

Rounded Loading Page: In this lesson we will learn how to create a loading page with multi colored rounded animation. The loading page helps your website when the user network connection is weak or when the website loading is slow. This lesson code will be pure CSS and HTML.

This lesson Follow this order:

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

Lesson 03

This is a Video for the Same Lesson Post:

https://youtu.be/yiDa7u6uizw

Creating the HTML file and code:

First of all we need to create an HTML file to hold the coding and the circle element that we will create. So let’s create an HTML file and name it “loading3.html”.

Then we will add the following code inside it:

<!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="loading">
    <span>SAFHATECH</span>
</div>
</body>
</html>

In that code we’ve added the style-sheet file link and added the HTML div elements.

The code of linking HTML file with style-sheet file:

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

And here we added the html div and the text which is in the middle of the animation:

<div class="loading">
    <span>SAFHATECH</span>
</div>

Creating the CSS file and code:

Now we will create a CSS file with “style.css”. And we will add this code as the following:

body{
    padding: 0;
    margin: 0;
    background-color: #185e38;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading{
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border-radius: 50%;
    border-top: 50px solid #00aeff;
    position: relative;
    animation: a1 2s linear infinite;
}

.loading:before,.loading:after{
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    left:0;
    top:-50px;
    box-sizing: border-box;
    border-radius: 50%;
}
.loading:before{
    border-top:50px solid #e49823;
    transform: rotate(120deg);
}
.loading:after{
    border-top:50px solid #db432d;
    transform: rotate(240deg);
}

.loading span{
    position: absolute;
    top: -50px;
    width:200px;
    height: 200px;
    color:white;
    text-align: center;
    line-height: 200px;
    animation: b1 2s linear infinite;
}

@keyframes a1 {
    to{
        transform: rotate(360deg);
    }
}
@keyframes b1 {
    to{
        transform: rotate(-360deg);
    }
}

At the beginning of this code we added the body background and changed the margin and padding to zero. Also here we changed the position into the center of of the screen.

body{
    padding: 0;
    margin: 0;
    background-color: #185e38;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Here we will add the loading class style. In this code we added the first side of the circle which we defined its color and size.

.loading{
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border-radius: 50%;
    border-top: 50px solid #00aeff;
    position: relative;
    animation: a1 2s linear infinite;
}

The next code we added the other sides of the circles. Notice that this code is similar to the previous code only with a little difference, such as the position.

.loading:before,.loading:after{
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    left:0;
    top:-50px;
    box-sizing: border-box;
    border-radius: 50%;
}

Here we added the border position and the rotation value:

.loading:before{
    border-top:50px solid #e49823;
    transform: rotate(120deg);
}
.loading:after{
    border-top:50px solid #db432d;
    transform: rotate(240deg);
}

This Code control the text inside the circle the “SAFHATECH” text:

we added also the animation of the text which it will go at the opposite side of the circle rotation.


.loading span{
    position: absolute;
    top: -50px;
    width:200px;
    height: 200px;
    color:white;
    text-align: center;
    line-height: 200px;
    animation: b1 2s linear infinite;
}

Finally we added the key-frames that will control the animation:

@keyframes a1 {
    to{
        transform: rotate(360deg);
    }
}
@keyframes b1 {
    to{
        transform: rotate(-360deg);
    }
}

Y

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