Lets Create a Circular Progress Bar using just HTML CSS JavaScript, step-by-step in a very easy to follow along tutorial.
Source Code:
Markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Progress Bar</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
<body>
<div class="skill">
<div class="outer">
<div class="inner">
<div id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#DA22FF" />
<stop offset="100%" stop-color="#9733EE" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" />
</svg>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #e3edf7;
height: 100vh;
display: flex;
-ms-align-items: center;
align-items: center;
justify-content: center;
}
.skill {
width: 160px;
height: 160px;
/* background-color: cornflowerblue;*/
position: relative;
}
.outer {
height: 160px;
width: 160px;
border-radius: 50%;
/* border: 2px solid orangered;*/
padding: 20px;
box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}
.inner {
height: 120px;
width: 120px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
/* border: 2px solid orangered*/
box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
-0.5px -0.5px 0px rgba(255, 255, 255, 1),
0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
0px 12px 10px -10px rgba(0, 0, 0, 0.05);
}
#number {
font-weight: 600;
color: #555;
}
circle {
fill: none;
stroke: url(#GradientColor);
stroke-width: 20px;
stroke-dasharray: 450;
stroke-dashoffset: 450;
animation: anim 2s linear forwards;
}
@keyframes anim {
100% {
stroke-dashoffset: 157.5;
}
}
/*Put it on the top of our circle*/
svg {
position: absolute;
top: 0;
left: 0;
}
🛴 Follow me on:
Facebook: https://bit.ly/3cp2S5W
YouTube: https://bit.ly/3oBQbc0
Instagram{New}: https://bit.ly/3Ihh2EB
Top comments (0)