This project demonstrates a simple circular progress bar implemented using HTML, CSS, and JavaScript. The progress bar updates dynamically based on the input range value .
To use this circular progress bar, follow these steps:
- Clone or download the repository to your local machine.
- Open the
index.htmlfile in a web browser.
The HTML structure includes a div element with the class RadialProgress representing the circular progress bar. Additionally, an input element of type range is used to control the progress value.
The CSS file (style.css) defines the styles for the circular progress bar and the overall layout. Custom properties are used to control aspects such as hue, hole size, and track background. The circular progress bar is created using CSS conic gradients and masks.
The JavaScript file (script.js) handles the dynamic updating of the progress bar based on the input range value. It selects the input range element and the circular progress bar element, sets the progress value, and updates it dynamically as the input range value changes.
This project is created by Aarzoo.
This project is licensed under the MIT License - see the LICENSE file for details.