https://github.com/masterjaneza/circular-progress-bar---v1
A simple, animated circular progress bar built with HTML, CSS, and JavaScript. Designed as a visual example to display percentage-based progress using smooth animations and dynamic updates. Lightweight, customizable, and perfect for learning or integrating into projects like dashboards, portfolios, or loading screens.
https://github.com/masterjaneza/circular-progress-bar---v1
animations css-animations css3 cssanimations html5 simple v1 vanilla-javascript vanilla-js
Last synced: 10 months ago
JSON representation
A simple, animated circular progress bar built with HTML, CSS, and JavaScript. Designed as a visual example to display percentage-based progress using smooth animations and dynamic updates. Lightweight, customizable, and perfect for learning or integrating into projects like dashboards, portfolios, or loading screens.
- Host: GitHub
- URL: https://github.com/masterjaneza/circular-progress-bar---v1
- Owner: masterjaneza
- Created: 2025-05-12T13:48:13.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-08T12:54:48.000Z (11 months ago)
- Last Synced: 2025-06-08T13:39:39.402Z (11 months ago)
- Topics: animations, css-animations, css3, cssanimations, html5, simple, v1, vanilla-javascript, vanilla-js
- Language: HTML
- Homepage: https://circular-progress-bar-v1.vercel.app
- Size: 67.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple Circular Progress Bar | V1
A minimal example of a **circular progress bar** built with HTML, CSS, and JavaScript. This demo is focused on showcasing how to visually represent progress using a circular stroke and dynamic percentage updates — no external libraries, just clean and customizable code.
---
## 🔄 Live Behavior
- A circle fills up to represent a given percentage value.
- The percentage is also displayed as text in the center of the circle.
- Animated fill effect is smooth and can be controlled programmatically.
---
## ⚙️ Tech Stack
- ✅ **HTML** – structure for the circular container and progress display
- 🎨 **CSS** – handles the circle shape, animations, and visual styles
- 🔧 **JavaScript** – dynamically updates the percentage and stroke
---
---
## 🎯 Use Cases
- Loading animations
- Skill bars in portfolios
- Task or goal completion visualizers
- Health / energy / download progress UI in web apps or games
---
## ✨ Features
- Lightweight and dependency-free
- Easy to customize: colors, stroke width, animation speed
- Fully responsive and clean layout
- Great base for building more complex visualizations
---
## 🚀 How to Use
1. Clone or download the repository.
2. Open `index.html` in a browser.
3. Modify the value inside `script.js` to change the progress percentage.
4. Style away to fit your project needs!
---
## 💡 Future Ideas
- Add support for animated dynamic updates (on click, scroll, or loading)
- Create reusable component version
- Add support for multiple progress instances on one page
---
---
---
## ⚙️ Setup & Installation
1. **Clone the repository**
```bash
git clone [https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V5](https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V5)
```
**Open the Project:**
- Open `index.html` in your browser
**or**
- Use **Live Server** in VS Code.
---
---
---
## 🧪 Browser Support
This project works in all modern browsers. Some enhancements (like smooth scrolling or scroll snapping) may have minor inconsistencies in older browsers, but the core functionality holds.
---
## 🧪 License
Feel free to use, modify, or remix this project. No pressure.
Just give credit where credit’s due - sharing is caring. 😉
---
## 🌟 Support the Project
If this helped you or made you smile, hit that ⭐ on GitHub, fork it, remix it, and tag me in your own creations. Let’s build scroll magic together.
---
## ✍️ Credits
Crafted with pixels and passion by
**Davit Janezashvili**
_aka MasterJaneza – Creative Developer & Designer_
---
## ⚠️ Note
If you're using dark mode, some visuals might not look as intended. For the best experience, switch to light mode.
---