animated circles loading page image

Animated Circles as Loading page with CSS and HTML Code

Post author:Mofreh
Post published:November 4, 2019
Post category:Loading Animation / Web Design
Post comments:0 Comments

Circles as Loading page: In this lesson we will create an animated set of shapes to be used in your website. The code is pure css and html. And you could download and use the code from the button at this post bottom.

This lesson is a part of loading course supported by safhatech.com .

This post follow this order:

Creating HTML file and adding HTML code.
Creating Stylesheet file and adding css code.

Lesson 011

Here is a ” Circles as Loading page ” Video Tutorial:

https://youtu.be/pslx2C06ME8

Creating HTML file and adding HTML 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="square">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
</html>

Creating Stylesheet file and adding css code:

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to top ,#317fc1,#000000);
}
.square{

    position: relative;
    width: 100px;
    height: 100px;
}
.square span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}
.square span:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
    border-top: 10px solid #c55607;
    animation: animate 2s linear infinite;
}
.square span:nth-child(1){
    transform: rotate(0deg);
}
.square span:nth-child(2){
    transform: rotate(90deg);
}
.square span:nth-child(3){
    transform: rotate(180deg);
}
.square span:nth-child(4){
    transform: rotate(270deg);
}

@keyframes animate {
0%{
    left: -100%;}
    25%{
    left: 0;}
    50%,100%{
    left: 100%;}
}
.square span:nth-child(1):before{
    animation-delay: 0s;
}
.square span:nth-child(2):before{
    animation-delay: 0.5s;
}
.square span:nth-child(3):before{
    animation-delay: 1s;
}
.square span:nth-child(4):before{
    animation-delay: 1.5s;
}

You could download the code from here:

Download Code

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