Progress.rocks

Создавайте красивые, динамические SVG индикаторы прогресса мгновенно. Идеально для документации, дашбордов и везде, где нужно визуализировать прогресс.

🚀 Быстрый Старт

Просто используйте: https://progress.rocks/{value}/

Попробуйте:: https://progress.rocks/75/ 75% прогресс

📋 Параметры

Параметр Описание По умолчанию
title Текст метки, отображаемый с левой стороны Отсутствует
scale Максимальное значение (делает значения процентными при 100) 100
width Ширина части индикатора прогресса в пикселях 90 (60 с заголовком)
color Шестнадцатеричный цвет для секции заголовка #428bca
suffix Текстовый суффикс после значения прогресса %

Примеры

Базовый Прогресс

75% прогресс
Простой 75% прогресс
https://progress.rocks/75/
42.7% прогресс
Десятичная точность
https://progress.rocks/42.7/

С Заголовками

85% Покрытие
Прогресс покрытия тестами
https://progress.rocks/85/?title=Покрытие
67% Сборка
Статус сборки
https://progress.rocks/67/?title=Build

Пользовательские Шкалы

$15420 Собрано
Прогресс сбора средств
https://progress.rocks/15420/?scale=25000&suffix=$&title=Собрано
7/10 Уроков
Прогресс обучения
https://progress.rocks/7/?scale=10&suffix=/10&title=Уроков
1337pts Счет
Игровой счет
https://progress.rocks/1337/?scale=2000&suffix=pts&title=Счет

Мониторинг Системы

72% CPU
Использование CPU
https://progress.rocks/72/?title=CPU
120GB Дисковое Пространство
Использование дискового пространства
https://progress.rocks/120/?title=Дисковое Пространство&scale=250&suffix=GB

Пользовательский Стиль

67% Пользовательский
Пользовательский цвет
https://progress.rocks/67/?title=Пользовательский&color=ff6b6b
67.65% Прогресс Установки
Широкий Индикатор
https://progress.rocks/67.65/?title=Прогресс Установки&width=300

Интеграция

Markdown

![Progress](https://progress.rocks/67/?title=Проект)

HTML

<img src="/85/?title=Завершено" alt="85% Complete">

Прямая Ссылка

https://progress.rocks/75/