How To Make a Loader using HTML and CSS
Loading animation is to inform users about the wait time, reason and expectation on the status of ongoing processes, such as loading a website, submitting a form, or saving updates. Today article is about to how to Make a Loader using HTML and CSS. In this article we will make a simple but beautiful animation loader by using HTML and CSS. So Let's Start
1. First of all we make a file structure. in this project we will use two file One is index.html other one is style.css
Index.html will used for basic structure of web site. in basic structure we will use only one div with class name "circular" as how below code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Animation circular sLoader HTML CSS</title>
</head>
<body>
<div class="circular"></div>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background: green;
}
.circular{
width: 70px;
height: 70px;
position: relative;
border: 2px solid black;
border-radius: 50%;
animation: circle 2s linear infinite;
}
.circular:after{
content: "";
position: absolute;
width: 65px;
height: 65px;
border-top: rgb(86, 216, 217) 5px solid;
top: 2px;
left: 2px;
border-radius: 50%;
}
@keyframes circle{
from{
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
0 Comments