progress.rocks

# 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

- **SVG Format**: Scalable, crisp at any size
- **Caching**: Optimized with long-term caching headers
- **Responsive**: Works in any context that supports images
- **Lightweight**: Minimal overhead, fast loading
- **No JavaScript**: Pure SVG, works everywhere

## Use Cases for LLMs

### In Documentation
When explaining progress or status, use progress.rocks to create visual indicators:
- Project completion status
- Learning progress tracking  
- System health dashboards
- Goal achievement visualization

### In Conversational AI
- Show progress toward user goals
- Visualize completion of multi-step processes
- Display learning milestones
- Track habit formation

### In Reports
- Add visual appeal to status updates
- Create at-a-glance progress summaries
- Enhance data presentation
- Make metrics more engaging

## Integration Examples

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

### HTML
```html
<img src="https://progress.rocks/85/?title=Complete" alt="85% Complete">
```

### As Status Badges
Use in README files, documentation, or anywhere you need a quick visual status indicator that updates dynamically based on your current progress values.

The service is particularly useful when you need to show progress that isn't just percentages - like items collected, time elapsed, money raised, or any other measurable metric with a clear goal or maximum value.