How To Create A Loader Using Only HTML and CSS?

To create a loader like this by using only HTML and CSS. 



Create an HTML file and type this code.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <div class="loader"></div>



Create a CSS file and type this  code.

    width: 70px;
    height: 70px;
    border: 10px solid rgb(207, 207, 207);
    border-top: 10px solid red;
    border-radius: 50%;
    margin: auto;
    position: relative;
    top: 250px;
    animation-name: loader;
    animation-timing-function: linear;
    animation-duration: 1s;
    animation-iteration-count: infinite;
@keyframes loader{
        transform: rotateZ(0deg);


Copy the code from Our Github

Trending Posts

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

How To Create a Fake Facebook Login Clone Using Only HTML and CSS?

How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

Why iPhones Don't Have Memory Card Slots?

Sunrise And Sunset Animation Using HTML & CSS?

5 Tips To Become A Computer Genius | How To Become A Computer Genius?

8 Characteristics Of Modern Computer

Why Do All Celebrities Use iPhones?

Computer Memory Measurement Units Chart

How To Earn Money With Only HTML and CSS Knowledge?