https://github.com/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.
https://github.com/withaarzoo/circular-progressbar

codewithaarzoo css html

Last synced: about 12 hours ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/withaarzoo/circular-progressbar
• Owner: withaarzoo
• Created: 2024-02-27T12:10:13.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-02-28T05:23:44.000Z (9 months ago)
• Last Synced: 2024-02-28T13:36:34.966Z (9 months ago)
• Topics: codewithaarzoo, css, html
• Language: CSS
• Homepage:
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

![preview](https://github.com/withaarzoo/Circular-Progressbar/assets/59678435/6a118220-eb4f-47ec-af86-a7d71fc67771)

## 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](https://twitter.com/withaarzoo).

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.