Индикатор прогресса
Полосы по категориям
Расход по категориям столбиком полос с общей шкалой: все дорожки нормированы на одну ёмкость, поэтому длины сравнимы между собой, а не каждая сама себе сто процентов.
Что можно поменять
- состав и значения строк через rows
- полную ёмкость через capacity
- единицу измерения через unit
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/progress-005?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-progress-005-*. Серверный: хуков нет. Каждая строка — grid из двух колонок (имя и число) плюс дорожка на всю ширину: числа выстраиваются в колонку без табличной разметки. Доля считается от capacity, а не от суммы строк, поэтому свободное место остаётся видимым. Оттенок строки берётся хешем из её имени — новая категория получает свой цвет сама, таблицы соответствий нет; hue передаётся строке инлайновой переменной --vibeui-progress-005-hue и подставляется в oklch. У каждой дорожки собственный role="progressbar" со шкалой в единицах ёмкости и aria-valuetext словами.
Теги
- progress
- storage
- breakdown
- display
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…