A modern web service to generate and embed customizable progress bars anywhere! Create beautiful progress bars with our intuitive UI and embed them in your projects.
- Interactive UI: Customize your progress bars with our user-friendly interface
- Live Preview: See your changes in real-time
- Dark/Light Mode: Switch between themes for comfortable editing
- Preset Colors: Choose from a selection of beautiful preset colors
- Custom Styling: Adjust progress, color, background color, height, width, and border radius
- Special Effects: Add striped and animated effects to your progress bars
- Easy Embedding: Copy URL, Markdown, or HTML code with a single click
Simply use our URL with query parameters to create your progress bar:
https://progress-bars.entcheneric.com/bar?progress=75&color=%232563eb&width=800&height=50
Or visit our web interface to customize your progress bar visually.
https://progress-bars.entcheneric.com/bar?progress=75&width=800&height=50&colorGradient=linear-gradient(90deg,%20%230ea5e9,%20%232563eb,%20%234f46e5)&striped=true&animated=true&animationSpeed=1.5
https://progress-bars.entcheneric.com/bar?progress=80&color=%232563eb&backgroundColor=%23f8fafc&height=50&width=800&borderRadius=10&striped=true&animated=true&animationSpeed=1.5
<img src="https://progress-bars.entcheneric.com/bar?progress=75&color=%232563eb&width=800&height=50" alt="Progress Bar">All parameters are optional and have sensible defaults:
| Parameter | Default | Description | Example |
|---|---|---|---|
| progress | 0 | Progress value (0-100) | progress=75 |
| color | #2563eb | Color of the progress bar | color=%232563eb |
| colorGradient | - | Custom gradient for the progress bar | colorGradient=linear-gradient(90deg%2C%20%230ea5e9%2C%20%232563eb%2C%20%234f46e5) |
| backgroundColor | #f3f4f6 | Background color of the bar | backgroundColor=%23f8fafc |
| height | 20 | Height in pixels (5-500) | height=30 |
| width | 200 | Width in pixels (10-3000) | width=200 |
| borderRadius | 10 | Border radius in pixels (0-1000) | borderRadius=20 |
| striped | false | Add striped effect | striped=true |
| animated | false | Add animation to stripes or pulse effect | animated=true |
| animationSpeed | 1 | Speed multiplier for stripe/pulse animation | animationSpeed=2.5 |
| initialAnimationSpeed | 1 | Speed of initial progress fill animation (0 = instant) | initialAnimationSpeed=0.5 |
Documentation: Phase 1: 
Phase 2: 
Phase 3: - Use URL encoding for special characters in colors (e.g.,
%232563ebfor#2563eb) - For gradients, encode spaces as
%20and commas as%2C - The service is stateless - perfect for dynamic content
- Works in any environment that can display images from URLs
- Use the web interface to visually design your perfect progress bar
- Large widths (>1000px) may require horizontal scrolling in some containers
Feel free to contribute! Open issues and PRs are welcome.
MIT License - Use it anywhere you like!
You can use gradients instead of solid colors for more dynamic progress bars:
)Example:
Control how the progress bar fills initially:
- Set
initialAnimationSpeed=0for instant fill - Use higher values for faster fill animation
- Use lower values for slower fill animation
Example:
The progress bar can have animated stripes that move from right to left:
- First enable stripes with
striped=true - Then add animation with
animated=true - Control the animation speed with
animationSpeed(default: 1)
Example:
Note: The animated parameter only affects the stripe animation and requires striped=true to work.
- Height: 5px to 500px
- Width: 10px to 3000px
- Border Radius: 0px to 1000px (automatically adjusted for height)
Here are some example combinations:
High contrast:
Extra rounded:
Thin line:
Sunset gradient with stripes: