Progress

Компонент для встраивания горизонтального бар-чарта в разные интерфейсы. Позволяет показать распределение, долю или прогресс

§Примеры использования

✅ Когда применять Когда нужно показать уровень выполнения или заполнения сущности: свободное место на диске, количество выполненных задач и т. д.

🚫Когда не применять Когда нужно показать одно значение безотносительно других. Например, 15/60 показать прогрессом можно, а только 15 — нельзя.

§Структура

1. Цветная индикация показателя. Обязательная часть.
2. Текст. Можно использовать только в размере M. Опциональная часть.
3. Подложка. Обязательная часть.

§Размеры

1. M — единственный размер, у которого есть текст. Может использоваться в блоках с большим количеством места, на страницах, где основная задача — работа с прогрессом.
2. S — используется в таблицах, карточках и отдельно тогда, когда прогресс не единственная важная составляющая на странице.
3. XS — используется в узких местах, где важно сохранять компактность контента.

§Темы

Default — используется чаще для нейтральных случаев, когда не нужно лишний раз обращать внимание на прогресс, — например, когда на странице есть более важные элементы.

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

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

Warning — для внештатных ситуаций, чтобы предупредить пользователя о чем-либо, — например, обратить внимание на надвигающуюся проблему.

Danger — для привлечения максимального внимания при возникновении ошибки и необходимости предпринять действия для устранения проблемы – например, в случаях, когда закончилось места на диске, произошел сбой в системе и т.д.

Misc — для нейтральных случаев, когда остальные темы по каким-либо причинам не подходят.

§Применимость

1. Изменение цвета в зависимости от заполненности прогресса. Можно настраивать так, что цвет будет менять от значения прогресса, — например, стандартная индикация синяя (info), а при 100% — зеленая (succes).

   

2. Анимация загрузки. Стоит использовать в случаях, когда важно показать пользователю прогресс в реальном времени, — например, при загрузке файлов с компьютера.

   

3. Пользовательские цвета.Можно использовать свой набор цветов индикации прогресса для случаев, когда все остальные варианты не подходят (отдельный пользовательский цвет и комбинацию нескольких цветов).

   

§Примеры использования

Компонент можно комбинировать с текстом, встраивать в другие компоненты, – например, завернуть прогресс в карточку или таблицу, объединить с поясняющим текстом, действием и т.д.

1. В блоках с загрузкой/выгрузкой файлов.

   

2. В карточках, — например, в чек-листе с задачами.

   

3. В таблицах — например, чтобы показать загруженность дисков.