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/