Создавая информационные сайты мы иногда задумываемся о том, как бы нам отобразить прогресс какого либо действия или процент выполнения задачи. Например сколько денег осталось до завершения сбора или сколько в процентном соотношении осталось до выполнения задачи. А самое распространенный пример это отображения опыта и знаний в той или иной области или кол-во заполненной информации о себе, как это сделано вконтакте.
Вы уже поняли, что данный визуальный элемент вы встречаете везде, но просто не обращаете на него внимание, но информацию считываете сразу. Как уже написано выше, такие элементы называются как : прогресс, прогресс бар, полоса опыта, шкала в процентах, полоска в процентах итд. А в конструкторе сайта такой компонент называется просто "Прогресс".
Виджет "Прогресс" предназначен для визуализации прогресса завершения задачи (или количества информации) в виде анимированной полоски с текстовой информацией. У виджета не много настроек и свойств стилей, но этого вполне достаточно для того, чтобы визуализировать информацию в виде прогресс бара и красиво разместить ее на свой сайт, который мы создаем в конструкторе.
Выше пример виджета "Прогресс", в трех вариантах. Первый из них это виджет по умолчанию. Любой из текстов можно поменять и задать свои стили и типографика. Тоже самое относится и к стилю самого прогресс бара, т.е полоски. Посмотрим а настройки более подробно.
Содержимое
- Прогресс
- Заголовок - текст для заголовка прогесс бара, т.е текст который над полоской.
- Тип - стиль оформления блока из стандартных типов информации (Информация, Успех, Предупреждение, Опасность). В зависимости от выбранного типа, меняется цветовое оформление.
- Доля - количество процентов заполненности полоски в виде цветной шкалы.
- Показать проценты - можно выключить отображения информации в виде цифры со знаком процента.
- Текст внутри - текст внутри полоски прогресса.
Стиль
- Прогресс
Для полоски прогресса возможно задать цвет фона, цвет самой шкалы и цвет текста внутри прогресса т.е цветной шкалы.
- Стиль заголовка
Стандартные свойства для текста, т.е доступны свойства для изменения цвета заголовка, а так же ее типографика.