Source codes:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<style type=”text/css”>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
background: #0d1117;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
gap: 30px;
}
.progress-container{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(blue 0deg, yellow 0deg);
display: flex;
justify-content: center;
align-items: center;
transition: background 0.5s;
}
.progress-inner{
width: 150px;
height: 150px;
background: conic-gradient(#FFF574 0deg,
#A1D6CB 0deg);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #FF8383;
font-size: 30px;
font-weight: bold;
}
.input-container{
width: 350px;
text-align: center;
}
input[type=”range”]{
width: 80%;
-webkit-appearance:none;
background: none;
}
input[type=”range”]::-webkit-slider-runnable-track{
height: 6px;
background: #FF8383;
border-radius: 3px;
}
input[type=”range”]::-webkit-slider-thumb{
-webkit-appearance:none;
width: 15px;
height: 15px;
background: #FFF574;
border-radius: 50%;
cursor: pointer;
margin-top: -5px;
}
</style>
</head>
<body>
<div class=”progress-container” id=”progress”>
<div class=”progress-inner” id=”progress-text”>0%</div>
</div>
<div class=”input-container”>
<input type=”range” id=”progress-range” min=”0″ max=”100″ value=”0″>
</div>
<!– JavaScript –>
<script type=”text/javascript”>
const progressContainer = document.getElementById(‘progress’);
const progressText = document.getElementById(‘progress-text’);
const rangeInput = document.getElementById(‘progress-range’);
rangeInput.addEventListener(‘input’,()=>{
const value = rangeInput.value;
progressText.textContent = `${value}%`;
progressContainer.style.background=`conic-gradient(#FF8383 ${value * 3.6}deg, #FFF574 0deg)`;
});
</script>
</body>
</html>
