Code Craze

Aug 16, 20231 min

How to create a loader in HTML CSS

Updated: Aug 17, 2023

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

}

h1 {

color: white;

text-align: center;

}

.main{

background:red;

width:200px;

height:200px;

border-radius:195px;

border:10px solid #66ffff;

border-top:10px solid #004d4d;

background:none;

animation: rotate 0.5s infinite;

}

@keyframes rotate{

100%{rotate:360deg;

}

}

</style>

</head>

<body>

<h1>My Loader</h1><br><br>

<center><div class="main"></div></center>

</body>

</html>

    80
    3