How to Create a Looping Multi Colored Circle with CSS & HTML?
looping circle image safhatech design

How to Create a Looping Multi Colored Circle with CSS & HTML?

Looping Multi Colored Circle: In this lesson will learn how to create a looping circle with more than one color. You could download the code from a button at this page bottom. The code is pure css and HTML.

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 18

This Video explain the same topic ” Looping Multi Colored “:

https://youtu.be/ApUhG6BQIdk

Creating empty HTML file then add HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="center">
    <div class="loading">

    </div>
</div>
</body>
</html>

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

body{
    padding: 0;
    margin: 0;
    background-color: #0b3054;
}
.center{
    display: flex;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.loading{
    width: 200px;
    height: 200px;
    border: 5px solid #e8e8e8;
    border-radius: 50%;
    border-bottom: 5px solid #e49823;
    animation: anim 2s linear infinite;
}
.loading:before{
    content: '';
    position: absolute;
    top:10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    border: 5px solid #e8e8e8;
    border-radius: 50%;
    border-bottom: 5px solid #2486e4;
    animation: anim 3s linear infinite;
}
.loading:after{
    content: '';
    position: absolute;
    top:20%;
    left: 20%;
    right: 20%;
    bottom: 20%;
    border: 5px solid #e8e8e8;
    border-radius: 50%;
    border-bottom: 5px solid #e41a7a;
    animation: anim 2s linear infinite;
}
@keyframes anim {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

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