You are currently viewing Animated Circles as Loading page with CSS and HTML Code
animated circles loading page image

Animated Circles as Loading page with CSS and HTML Code

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 .

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:

Creating HTML file and adding HTML code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">

<div class="square">

Creating Stylesheet file and adding css code:

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

    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 {
    left: -100%;}
    left: 0;}
    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:

Consequently You could follow us at :

Website URL:


Twitter: http://


Facebook: http://

Phone: 967778283416

Leave a Reply