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&param2=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