🚀 Dynamic Progress Bar

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

📊 Preview:

Inspired by .

🔥 Other Projects

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

🔧 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)
`progress_number_color`	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`

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&progress_background=ffc0cb&progress_number_color=000
	https://progress-bar.xyz/100/?progress_color=ff3300
	https://progress-bar.xyz/100/?width=100&title=Fixed+color&progress_color=ff3300
	https://progress-bar.xyz/28/?show_text=false
	https://progress-bar.xyz/90/?show_text=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

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

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

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`).
`cache`	Optional. `Cache-Control` max-age in seconds. Default: none (header not set unless provided and `> 0`).