Dynamic Progress Bar

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

Progress Progress Progress

Inspired by fredericojordan/progress-bar.

Other projects

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)
progress_number_color The color of the progress number (hex code without #) 000000 (black)
progress_color The color of the progress bar (hex code without #) Depends on percentage
show_text If should 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.

Example Preview URL
Progress https://progress-bar.xyz/28/
Progress https://progress-bar.xyz/28/?title=progress
Progress https://progress-bar.xyz/58/
Progress https://progress-bar.xyz/58/?title=completed
Progress https://progress-bar.xyz/91/
Progress https://progress-bar.xyz/91/?title=done
Progress https://progress-bar.xyz/180/?scale=10&title=mark&prefix=R$&suffix=
Progress https://progress-bar.xyz/420/?scale=500&title=funds&width=200&color=babaca&prefix=R$&suffix=
Progress https://progress-bar.xyz/7/?scale=10&title=mark&suffix=X
Progress https://progress-bar.xyz/420/?scale=500&title=funds&width=200&color=babaca&suffix=$
Progress https://progress-bar.xyz/58/?title=colorful&progress_background=ffc0cb&progress_number_color=000
Progress https://progress-bar.xyz/58/?progress_color=ff3300
Progress https://progress-bar.xyz/58/?width=100&title=Fixed+color&progress_color=ff3300
Progress https://progress-bar.xyz/28/?show_text=false
Progress https://progress-bar.xyz/90/?show_text=false

Styles

We currently have flat (default), square and plastic styles:

Example Preview URL
Progress https://progress-bar.xyz/100/?style=flat
Progress https://progress-bar.xyz/100/?style=square
Progress https://progress-bar.xyz/100/?style=plastic

Deployment

You can deploy this project to Vercel with a single click:

Deploy with Vercel

License

This project is open-source and available under the MIT License.