Сложный круговой прогрессбар — простая реализация | 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 и внутри ключевых кадров меняем значение переменной.
Прогрессбар готов. Можете экспериментировать с ним и менять под свои нужды.
Например, можно изменить последний градиент с линейного на конический и получить заполнитель с полупрозрачными секторами.
А изменение цвета шкалы можно сделать с помощью классов-модификаторов и JS, если требования к поддержке не позволяют использовать if().
