How to Create a Simple Animated Clock as a Loading Page? | Pure CSS
Loading page as Clock image

How to Create a Simple Animated Clock as a Loading Page? | Pure CSS

Simple Animated Clock: In this lesson we will creating a looping clock as a loading page with only CSS and HTML code. The loading page is great idea for helping your website not get bored if your website is slow of if the user connection is slow. You could download the code at the bottom of this post.

This post follow this order:

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

Lesson 06

This Video Explain Creating Animated Clock, You Could Watch It:

https://youtu.be/5SQyBoq26iE

Creating an HTML file and adding HTML code:

Here we will create an empty HTML file I will name it “loading6.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" rel="stylesheet" type="text/css">
</head>
<body>

<div class="center">
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="circle"></div>
</div>
</body>
</html>

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

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

Then we have created a .center class which control the position to be in the center. Then we added five boxes four of them will represent the time corner and the first .box class will represent the clock pointer:


<div class="center">
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="circle"></div>
</div>

Creating the CSS style and adding our design style:

Here we have created a CSS empty file and name it “style.css”. Then we will add the following style:

body{
    margin:0;
    padding: 0;
    background-color: #05252b;
}
.center{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.box{
    position: absolute;
    width:11px;
    height:130px;
    border-radius: 5px;
    background-color: #e49823;
    animation: animate 2s linear infinite;
}
.box:before{
    content: '';
    position: absolute;
    left:-5px;
    width: 15px;
    height:15px;
    border-left: 7px solid white;
    border-top: 7px solid white;
    transform: rotate(45deg);
    border-radius: 5px;

}
.box1,.box2,.box3,.box4{
    position: absolute;
    width:10px;
    height:15px;
    background-color: white;
    opacity: 0.5;
}
.box1{
    top:-19px;
    transform: rotate(90deg);
}.box2{
    top:137px;
    transform: rotate(90deg);
}
 .box3{
     top:60px;
     left: 80px;
 }
 .box4{
     top:60px;
     left:-80px;
 }

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

The .center class control the position of the content.

Then the .box class control the clock pointer, and the .box:before represent the arrow of the pointer.

Then here we added the position of the boxes which is in the clock to be in the top, bottom, right and left.:

.box1{
    top:-19px;
    transform: rotate(90deg);
}.box2{
    top:137px;
    transform: rotate(90deg);
}
 .box3{
     top:60px;
     left: 80px;
 }
 .box4{
     top:60px;
     left:-80px;
 }

Finally we added the animation @Key-frames, that will control the animation during the time we identified :

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

You Could download the code at the following 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