Сложный круговой прогрессбар — простая реализация | CSS Боль
Раньше, чтобы создать круговой прогрессбар, нужно было работать с SVG, вычислять углы, следить за атрибутами. Страдать.
В этом курсе мы подробно изучим, как создать круговой прогрессбар с полупрозрачной шкалой, который выглядит так, будто он «вырезан» внутри блока.
Основу реализации составляет одно CSS-свойство, которое поддерживается большинством браузеров.
Видеоверсия этого курса доступна во ВКонтакте и на Ютюбе
Начнём реализовывать с нуля. Чтобы создать компонент, нам нужен только один элемент — div с классом .progress.
Зададим ему фиксированные размеры и временно добавим полупрозрачный цвет для фона.
Без долгих введений перейдём к ключевому свойству. Это старое доброе свойство background-image с множественными фонами.
Первый фон создадим с помощью радиального градиента круглой формы и резкими переходами цветов.
Добавим в градиент второй колорстоп с прозрачным цветом. После этого станет виден первый резкий переход между тёмным и прозрачным цветами.
Обратите внимание, позиции цвета заданы с помощью двух процентных значений: 0% 27% и 28% 50%. Такой синтаксис помогает легко создавать резкие переходы цветов.
Добавим третий колорстоп с тем же цветом, что и в первом колорстоп. Теперь первый градиент готов.
Мы получили форму «бублик», в которой «вырезана» прозрачная полоска. Шкала прогрессбара готова.
Следующий шаг — создание заполнителя.
Создадим заполнитель с помощью второго фонового изображения, которое разместим под первым.
Вторым изображением будет конический градиент с резким переходом цветов.
Временно уберём радиальный градиент. Конический градиент станет полностью видимым. У него есть только один колорстоп, поэтому вся область будет залита цветом этого колорстоп.
Добавим второй колорстоп с прозрачным цветом. Чтобы создать резкий переход, используем тот же синтаксис с двумя процентными значениями.
Поэкспериментируем с позицией цвета. Изменим её значение на 60%. Область заливки изменилась.
Вернём на место радиальный градиент и получим прогрессбар с частично заполненной шкалой.
В этом и заключается суть приёма, который позволяет создать сложный прогресс-бар:
- множественные фоновые изображения;
- радиальный градиент с прозрачным цветом сверху для создания формы бублика;
- конический градиент для управления заполнителем снизу.
Поддержка этого приёма — великолепна.
Давайте посмотрим, как можно усложнить прогрессбар, используя более современные и даже экспериментальные возможности CSS.
Сначала добавим CSS-переменную --progress, которая позволит управлять прогрессом. Пересчитаем эту переменную в проценты и сохраним результат в переменной --corner.
Внедрим --corner в конический градиент как позицию цвета. Теперь можно управлять уровнем заполнения шкалы с помощью переменной --progress.
Добавим в разметку несколько прогрессбаров. Для каждого установим разное значение прогресса с помощью инлайновых стилей.
Следующий шаг. Настроим цвет прогрессбара так, чтобы он менялся при разных значениях прогресса.
Для этого воспользуемся экспериментальными возможностями: функцией if() и Range syntax for style queries (синтаксисом диапазонов для запросов стилей). Пока они работают только в новых версиях Chrome.
Используем переменную --color в коническом градиенте как цвет заполнителя и укажем красный цвет, если значение --progress меньше или равно 33.
Установим для --color жёлтый цвет, если значение --progress меньше или равно 66.
Установим для --color зелёный цвет, если значение --progress меньше или равно 99, и белый цвет в остальных случаях.
Теперь добавим псевдоэлемент ::before и зададим ему разные значения в свойстве content с помощью функции if(). Используем те же диапазоны значений.
Стилизуем текст псевдоэлемента. Для цвета используем переменную --color от родительского элемента.
Преобразуем блок .progress во флекс-контейнер и выравниваем содержимое по центру. Теперь текст псевдоэлемента находится в центре прогрессбара.
Чтобы сделать эффект полупрозрачности более заметным, добавим третье фоновое изображение для элемента .progress.
Создадим эффект рифлёного стекла с помощью повторяющегося линейного градиента.
Добавим дополнительные колорстопы в радиальный градиент между цветами #222222 и transparent. Это позволит создать аккуратные рамки по краям «бублика».
Скруглим углы блока .progress, а также добавим две тени. Внешняя тень выделит блок, а внутренняя добавит лёгкую светлую обводку-блик по его краю.
Важная особенность этого решения — его можно анимировать с помощью нативного CSS. Во время анимации изменять размер и цвет заполнителя одновременно.
Для этого регистрируем переменную --progress с помощью @property и внутри ключевых кадров меняем значение переменной.
Прогрессбар готов. Можете экспериментировать с ним и менять под свои нужды.
Например, можно изменить последний градиент с линейного на конический и получить заполнитель с полупрозрачными секторами.
Если нельзя использовать if() из-за требований к поддержке, цвет шкалы можно изменять через классы-модификаторы и JavaScript.
