Last updated May 10, 2021 In this example we will cover how to create a circular loading in html CSS. To create a circular loader we will apply the css properties like below border: solid 5px white ;border-top: solid 5px green; width: 50px; height: 50px; border-radius: 50%;
This Circular loading example contains 1 Html file and 1 CSS file to apply style properties to make circular with animation.
HTML file
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Loader</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Loading...</h1>
<div class="loading"></div>
</body>
</html>
|
CSS file
|
body{
background: black;
}
h1{
margin-top: 300px;
text-align: center;
color: green;
}
.loading{
margin-top: 400px;
margin: 50px auto;
border: solid 5px white ;
border-top: solid 5px green;
width: 50px;
height: 50px;
border-radius: 50%;
animation: loading 1s infinite linear;
}
@keyframes loading{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
|
Gradient Circular Loader CSS file
|
<style>
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
.loader
{
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
animation: animate 2s linear infinite;
}
@keyframes animate
{
0%
{
transform: rotate(0deg);
filter: hue-rotate(0deg);
}
100%
{
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}
.loader:before
{
content: '';
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
background: #000;
border-radius: 50%;
z-index: 1000;
}
.loader:after
{
content: '';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
border-radius: 50%;
z-index: 1000;
z-index: 1;
filter: blur(30px);
}
</style>
|
Conclusion: In this example we created simple circular loader in html using css properties without any js files.