circleLoading.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Animation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Loader">
<div class="circle-outside">
<div class="circle-inside"></div>
</div>
<span>Loading</span>
</div>
</body>
</html>
style.css
body{
background-color: rgb(34, 32, 32);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.Loader{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.circle-outside{
width: 150px;
height: 150px;
padding: 3px;
border-radius: 50%;
background:linear-gradient(rgba(87,133,240,0.1) 40%,rgb(58,16,173) 100%);
animation: spin 1s linear infinite;
}
.circle-inside{
width: 100%;
height: 100%;
border-radius: 50%;
background-color: rgb(34, 32, 32);
}
span{
position: absolute;
font-size: 25px;
color: aqua;
animation: fadeIn 1s linear infinite;
}
@keyframes spin{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
@keyframes fadeIn{
from{
opacity: 0;;
}
to{
opacity: 1;
}
}
View of Loader
Video Link
Check out my YouTube channel for more such videos :
https://www.youtube.com/channel/UCrgTxZY_mtmFV0EpHeaRezg?view_as=subscriber
Follow me on my facebook page
https://www.facebook.com/Coding-Zone-101009098243029/?modal=admin_todo_tour
Post a Comment