Making a Vertical Animated Circles as Loading Page
Vertical loading page image

Making a Vertical Animated Circles as Loading Page

Vertical Animated Circles: In this lesson we will learn how to create an animated circles as a loading page with only CSS and HTML code. You could download the code at this post bottom. Follow us for more free lessons.

This lesson is a part of an animated loading page course. These lessons is supported with: SAFHATECH.COM.

You could see the other videos and lessons by going to safhatech.com and going to categories. From the navigation bar and then loading at design.

The order of this lesson is like this:

  • Creating empty HTML file then add HTML code.
  • Creating empty style-sheet file and then adding CSS style.

Lesson 17

This Video explain the same topic ” Rolling Tire Animation”:

https://youtu.be/tDEEqp1vDDc

Creating empty HTML file then add HTML code:

<!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="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

Creating empty style-sheet file and then adding CSS style:

body{
    margin: 0;
    padding: 0;
    background-color: #06383e;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}
.container div{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation: a1 2s linear infinite;
}
@keyframes a1 {
    0%,40%,100%{
        transform: scale(0.2);
    }
    20%{
        transform: scale(1);
    }
}
.container div:nth-child(1){
    animation-delay: -0.2s;
    background-color: #ae1b06;
    box-shadow: 0 0 50px #ff260a;
}
.container div:nth-child(2){
    animation-delay: -0.4s;
    background-color: #0a9e00;
    box-shadow: 0 0 50px #0eff00;
}
.container div:nth-child(3){
    animation-delay: -0.6s;
    background-color: #005b94;
    box-shadow: 0 0 50px #009cff;
}
.container div:nth-child(4){
    animation-delay: -0.8s;
    background-color: #9c0079;
    box-shadow: 0 0 50px #ff00c7;
}
.container div:nth-child(5){
    animation-delay: -1.0s;
    background-color: #e49823;
    box-shadow: 0 0 50px #fce900;
}

Finally: You could Download the code from here:



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