withaarzoo / circular-progressbar

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.

Circular Progress Bar

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 .

Preview

Usage

To use this circular progress bar, follow these steps:

1. Clone or download the repository to your local machine.
2. Open the index.html file in a web browser.

Implementation Details

HTML

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.

CSS

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.

JavaScript

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.

Credits

This project is created by Aarzoo.

License

This project is licensed under the MIT License - see the LICENSE file for details.