CircleProgress.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Circle Progress </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Progress">
<div class="loader"> </div>
</div>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
}
body{
background-color: #222;
}
.Progress{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.loader{
position: relative;
width: 150px;
height: 150px;
top: 50%;
left: 50%;
margin: -75px 0 0 -75px;
border: 4px solid transparent;
border-radius: 50%;
border-top-color: blue;
animation: spin 2s linear infinite;
}
.loader::before{
content: '';
position: absolute;
border-radius: 50%;
border:3px solid transparent;
top:5px;
left: 5px;
right: 5px;
bottom: 5px;
border-top-color: royalblue;
animation: spin 3s linear infinite;
}
.loader::after{
content: '';
position: absolute;
border-radius: 50%;
border:3px solid transparent;
top:15px;
left: 15px;
right: 15px;
bottom: 15px;
border-top-color: rgb(199, 45, 40);
animation: spin 1.5s linear infinite;
}
@keyframes spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
Image
code video:
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