Back to Examples
Progress Rocks ProgressBars
Progress.rocks is a simple, powerful web service that generates customizable SVG progress bars on-demand. Perfect for documentation, dashboards, status pages...
Lines
145
Sections
6
Want your own llms.txt file?
Generate a professional, AI-friendly file for your website in minutes!
llms.txt Preview
# Progress.rocks - Dynamic SVG Progress Bars
Progress.rocks is a simple, powerful web service that generates customizable SVG progress bars on-demand. Perfect for documentation, dashboards, status pages, readme files, and any context where you need to visualize progress or completion status.
## Quick Start
The basic URL pattern is: `https://progress.rocks/{value}/`
- **Simple progress**: `https://progress.rocks/75/` → 75% progress bar
- **Decimal values**: `https://progress.rocks/42.7/` → 42.7% progress bar
## Parameters
All parameters are optional and can be combined using URL query syntax (`?param=value¶m2=value2`):
### Parameters
- **`title`** - Label text displayed on the left side of the progress bar
- **`scale`** - Maximum value (default: 100, making values percentages)
- **`width`** - Width of the progress bar portion in pixels (default: 90 without title, 60 with title)
- **`color`** - Hex color for the title section (default: #428bca)
- **`suffix`** - Text suffix after the progress value (default: %)
### Color Behavior
Progress bars automatically change color based on completion ratio:
- **Red (#d9534f)**: < 30% complete
- **Orange (#f0ad4e)**: 30-70% complete
- **Green (#5cb85c)**: > 70% complete
## Usage Examples
### Basic Progress Tracking
```
https://progress.rocks/56/
https://progress.rocks/73.2/
https://progress.rocks/0/
https://progress.rocks/100/
```
### With Custom Titles
```
https://progress.rocks/85/?title=Tests
https://progress.rocks/42/?title=Coverage
https://progress.rocks/67/?title=Build
https://progress.rocks/12/?title=Setup
```
### Custom Scales (Non-Percentage)
```
https://progress.rocks/7/?scale=10&suffix=/10&title=Steps
https://progress.rocks/1337/?scale=2000&suffix=pts&title=Score
https://progress.rocks/45/?scale=60&suffix=min&title=Time
https://progress.rocks/23/?scale=50&suffix=items&title=Collected
```
### Financial/Fundraising Progress
```
https://progress.rocks/15420/?scale=25000&suffix=$&title=Raised
https://progress.rocks/850/?scale=1000&suffix=€&title=Goal
https://progress.rocks/42500/?scale=100000&suffix=$&title=Funding
```
### Project Management
```
https://progress.rocks/23/?scale=45&suffix=tasks&title=Sprint
https://progress.rocks/8/?scale=12&suffix=epics&title=Release
https://progress.rocks/156/?scale=200&suffix=hrs&title=Logged
```
### Learning/Skill Progress
```
https://progress.rocks/340/?scale=500&suffix=XP&title=Level
https://progress.rocks/15/?scale=20&suffix=lessons&title=Course
https://progress.rocks/750/?scale=1000&suffix=words&title=Vocab
```
### System Monitoring
```
https://progress.rocks/72/?title=CPU
https://progress.rocks/34/?title=Memory
https://progress.rocks/89/?title=Disk
https://progress.rocks/120/?title=Disk%20Space&scale=250&suffix=GB
https://progress.rocks/12/?scale=24&suffix=hrs&title=Uptime
```
### Reading/Content Progress
```
https://progress.rocks/145/?scale=300&suffix=pages&title=Book
https://progress.rocks/8/?scale=12&suffix=episodes&title=Season
https://progress.rocks/23/?scale=40&suffix=articles&title=Reading
```
### Custom Styling
```
https://progress.rocks/67/?title=Custom&color=ff6b6b
https://progress.rocks/45/?title=Brand&color=4ecdc4&width=120
```
## Technical Features Preview of Progress Rocks ProgressBars's llms.txt file. View complete file (145 lines) →
Ready to create yours?
Generate a professional llms.txt file for your website in minutes with our AI-powered tool.
Generate Your llms.txt File