Create a dynamic circular progress bar where you can easily customize the percentage value with a range select is created with HTML, CSS and JS.
Getting started
It’s pretty easy to get started with Statusfy.
Create a new index.html file with this HTML code..
<div class="radialProgress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
<input type="range" value="25" min="0" max="100" />
Create a style.css file with this CSS code.
@import url('https://fonts.googleapis.com/css2?family=Mouse+Memoirs&display=swap');
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
background: #2e3138;
}
body {
min-height: 100%;
min-width: 100%;
box-sizing: border-box;
display: grid;
align-content: center;
justify-content: center;
place-content: center;
font-family: 'Mouse Memoirs', sans-serif;
}
.radialProgress {
height: 50vmin;
width: 50vmin;
min-width: 100px;
min-height: 100px;
display: grid;
align-items: center;
justify-items: center;
place-items: center;
position: relative;
font-weight: 700;
font-size: max(10vmin, 1.4rem);
color: #1F51FF;
}
.radialProgress::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
z-index: -1;
background: conic-gradient(hsl(220 100% 70%), hsl(220 100% 40%), hsl(220 100% 70%) var(--progress, 0%), hsl(233, 34%, 92%) var(--progress, 0%) 100%);
-webkit-mask-image: radial-gradient(transparent 65%, black calc(65% + 0.5px));
mask-image: radial-gradient(transparent 65%,black calc(65% + 0.5px));
}
input[type=range] {
-webkit-tap-highlight-color: transparent;
border-radius: 0.75em;
overflow: hidden;
margin-bottom: 1.5em;
margin: 50px 0;
background-color: transparent;
box-shadow:
0.3em 0.3em 0.4em #202227 inset,
-0.3em -0.3em 0.4em #3c4049 inset;
display: block;
padding: 0 0.1em;
width: 100%;
height: 1.5em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=range]:focus {
outline: transparent;
}
input[type=range]::-webkit-slider-thumb {
background-color: #255ff4;
border: 0;
border-radius: 50%;
box-shadow:
-0.3em -0.3em 0.5em #0937aa inset,
0 -0.2em 0.2em 0 #0004,
0.3em 0.9em 0.8em #0007;
cursor: pointer;
position: relative;
width: 1.3em;
height: 1.3em;
transition: all 0.1s linear;
z-index: 1;
-webkit-appearance: none;
appearance: none;
}
input[type=range]:focus::-webkit-slider-thumb {
background-color: #5583f6;
box-shadow:
-0.3em -0.3em 0.5em #0b46da inset,
0 -0.2em 0.2em 0 #0004,
0.3em 0.9em 0.8em #0007;
}
input[type=range]::-moz-range-thumb {
background-color: #255ff4;
border: 0;
border-radius: 50%;
box-shadow:
-0.3em -0.3em 0.5em #0937aa inset,
0 -0.2em 0.2em 0 #0004,
0.3em 0.9em 0.8em #0007;
cursor: pointer;
position: relative;
width: 1.3em;
height: 1.3em;
transform: translateZ(1px);
transition: all 0.1s linear;
z-index: 1;
-moz-appearance: none;
appearance: none;
}
input[type=range]:focus::-moz-range-thumb {
background-color: #5583f6;
box-shadow:
-0.3em -0.3em 0.5em #0b46da inset,
0 -0.2em 0.2em 0 #0004,
0.3em 0.9em 0.8em #0007;
}
input[type=range]::-moz-focus-outer {
border: 0;
}
Create script.js file with this Jaascript Code
const controller = document.querySelector('input[type=range]');
const radialProgress = document.querySelector('.radialProgress');
const setProgress = progress => {
const value = `${progress}%`;
radialProgress.style.setProperty('--progress', value);
radialProgress.innerHTML = value;
radialProgress.setAttribute('aria-valuenow', value);
};
setProgress(controller.value);
controller.oninput = () => {
setProgress(controller.value);
};
then,
connect the style.css and script.js file in index.html file
I hope you know how to add css and js file in html. Or follow tutorial video..
0 Comments