loopiing red curve image

How to Create a Looping Red Curve with Only CSS and HTML Code?

Looping Red Curve: In this lesson we will learn how to create a red looping curve as a loading page. The code will be at this lesson post. The code will be created in pure CSS.

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 20

This Video explain the same topic:

https://youtu.be/M_PLau5Koko

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="center">
    <div class="Curve">

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

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

body{
    padding: 0;
    margin: 0;
    background-color: #eeeeee;
}
.center{
    position: absolute;
    left: 50%;
    top:50%;
    display: flex;
    transform: translate(-50%,-50%);
}
.Curve{
    width: 200px;
    height: 200px;
    border-top: 15px solid #ae1b06;
    border-radius: 50%;
    animation: animate 2s linear infinite;
}
@keyframes animate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

Finally: You could Download the code from here:Download Code

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