🚀 Dynamic Progress Bar

Generates a dynamic progress bar image (SVG) using Python, deployed freely via Vercel.

📊 Preview:

Inspired by .

🔥 Other Projects

• ⭐ Dynamic Star Rating -

🛠️ Usage

This service is deployed on Vercel and accessible via the domain progress-bar.xyz.

⚙️ Parameters

| 🔧 Parameter | 📜 Description | 🎯 Default Value | | ----------------------- | -------------------------------------------------------------------------- | --------------------- | | title | Adds a title to the progress bar | None | | scale | The maximum value that the progress bar represents | 100 | | prefix | A string to add before the progress number | None | | suffix | A string to add after the progress number | % | | width | The width of the progress bar in pixels | 100 | | color | The color of the progress bar (hex code without #) | 00ff00 (green) | | progress_background | The background color of the progress bar (hex code without #) | ffffff (white) | | progressnumbercolor | The color of the progress number (hex code without #) | ffffff (white) | | progress_color | The color of the progress bar (hex code without #) | Depends on percentage | | show_text | Whether to display or hide the progress text | true | | style | The style. One of: default, flat, square, plastic, for-the-badge | default |

Examples

Below are several examples showcasing different ways to generate progress bars.

| 📌 Preview | 🌐 URL | | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | https://progress-bar.xyz/28/ | | | https://progress-bar.xyz/28/?title=progress | | | https://progress-bar.xyz/58/ | | | https://progress-bar.xyz/58/?title=completed | | | https://progress-bar.xyz/91/ | | | https://progress-bar.xyz/91/?title=done | | | https://progress-bar.xyz/180/?scale=10&title=mark&prefix=R$&suffix= | | | https://progress-bar.xyz/420/?scale=500&title=funds&width=200&color=babaca&prefix=R$&suffix= | | | https://progress-bar.xyz/7/?scale=10&title=mark&suffix=X | | | https://progress-bar.xyz/420/?scale=500&title=funds&width=200&color=babaca&suffix=$ | | | https://progress-bar.xyz/58/?title=colorful&progressbackground=ffc0cb&progressnumbercolor=000 | | | https://progress-bar.xyz/100/?progresscolor=ff3300 | | | https://progress-bar.xyz/100/?width=100&title=Fixed+color&progresscolor=ff3300 | | | https://progress-bar.xyz/28/?showtext=false | | | https://progress-bar.xyz/90/?showtext=false | | | https://progress-bar.xyz/dynamic/json/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fguibranco%2Fprogressbar%2Fmain%2Fdocs%2Fdynamic-json-sample.json&query=demo.metrics.translationPercent&title=JSON%20Demo | | | https://progress-bar.xyz/dynamic/json/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fguibranco%2Fprogressbar%2Fmain%2Fdocs%2Fdynamic-json-sample.json&query=demo.metrics.translationPercent |

🎨 Styles

We currently support:

| 🎨 Style | 📌 Preview | 🌐 URL | | --------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | 🟢 flat (default) | | https://progress-bar.xyz/100/?style=flat | | 🔲 square | | https://progress-bar.xyz/100/?style=square | | 🛡️ plastic | | https://progress-bar.xyz/100/?style=plastic | | 🔖 for-the-badge | | https://progress-bar.xyz/100/?style=for-the-badge | | 🎭 thin-rounded (WIP) | | https://progress-bar.xyz/100/?style=thin-rounded | | 🪞 neo-glass (WIP) | | https://progress-bar.xyz/100/?style=neo-glass | | 🎨 minimal-matte (WIP) | | https://progress-bar.xyz/100/?style=minimal-matte |

📡 Progress from a JSON URL

Besides a fixed value in the path (/75/), you can load the number from a remote JSON file.

Sample JSON file: https://raw.githubusercontent.com/guibranco/progressbar/main/docs/dynamic-json-sample.json

Use query parameters:

| Parameter | Description | | ----------- | ----------- | | url | Required. Address of the JSON document (http or https). Must be URL-encoded in the query string. | | query | Required. JSONPath (e.g. $.items[0].metrics.pct) or dot form from the root (e.g. items.0.metrics.pct). Filter expressions are supported, so you can look up a value by a sibling field instead of a hardcoded index — e.g. $.progress[?(@.data.language.name=='Spanish')].data.translationProgress. | | cache | Optional. Cache-Control max-age in seconds. Default: none (header not set unless provided and > 0). |

Any other parameters from the table above (title, scale, style, …) apply the same way as on /{number}/.

🚀 Deployment

Deploy this project to Vercel with a single click:

🤝 Contributing

Check out CONTRIBUTING.md to learn how to contribute!

👥 Contributors

Guilherme Branco Stracini

nimble-turtle

ztest95

David Nwosu

Eduardo Baptista

bhosley

🤖 Bots

dependabot[bot]

github-actions[bot]

penify-dev[bot]

deepsource-autofix[bot]

Snyk bot

📜 License

This project is licensed under the MIT License.

📄 See LICENSE for details.