Progress.rocks - Dynamic SVG Progress Bars

🚀 Quick Start

Simply use: https://progress.rocks/{value}/

Try it:: https://progress.rocks/75/ 75% progress

📋 Parameters

Parameter	Description	Default
`title`	Label text displayed on the left side	None
`scale`	Maximum value (makes values percentages when 100)	100
`width`	Width of progress bar portion in pixels	90 (60 with title)
`color`	Hex color for the title section	#428bca
`suffix`	Text suffix after the progress value	%

Examples

Basic Progress

75% progress

Simple 75% progress

https://progress.rocks/75/

42.7% progress

Decimal precision

https://progress.rocks/42.7/

With Titles

85% Coverage

Test coverage progress

https://progress.rocks/85/?title=Coverage

67% Build

Build status

https://progress.rocks/67/?title=Build

Custom Scales

$15420 Raised

Fundraising progress

https://progress.rocks/15420/?scale=25000&suffix=$&title=Raised

7/10 Lessons

Learning progress

https://progress.rocks/7/?scale=10&suffix=/10&title=Lessons

1337pts Score

Gaming score

https://progress.rocks/1337/?scale=2000&suffix=pts&title=Score

System Monitoring

72% CPU

CPU usage

https://progress.rocks/72/?title=CPU

120GB Disk Space

Disk space usage

https://progress.rocks/120/?title=Disk Space&scale=250&suffix=GB

Custom Styling

67% Custom

Custom color

https://progress.rocks/67/?title=Custom&color=ff6b6b

67.65% Install Progress

Wide Bar

https://progress.rocks/67.65/?title=Install Progress&width=300

Integration

Markdown

![Progress](https://progress.rocks/67/?title=Project)

HTML

<img src="/85/?title=Complete" alt="85% Complete">

Direct Link

https://progress.rocks/75/