Браузер Chrome (а также Edge, Safari и др.) поддерживают специфические псевдоэлементы, предназначенные для стилизации элемента <progress>:
На рис. 1 наглядно показано, какой псевдоэлемент на какую часть шкалы влияет.
Рис. 1. Псевдоэлементы
Цветная шкала
Чтобы эти псевдоэлементы работали, сперва следует «сбросить» стиль. Достаточно для селектора progress добавить или убрать рамку через свойство border.
progress {
border: 0; /* Убираем рамку */
}
В примере 1 показано изменение цвета шкалы прогресса с помощью свойства background.
Пример 1. Цвет шкалы прогресса
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>progress</title>
<style>
progress {
width: 100%; /* Ширина */
height: 10px; /* Высота */
border: 0; /* Убираем рамку */
}
progress::-webkit-progress-bar {
background: #ddd; /* Цвет фона шкалы */
border-radius: 5px; /* Радиус скругления */
}
progress::-webkit-progress-value {
background: #6943b8; /* Цвет фона значения */
border-radius: 5px; /* Радиус скругления */
}
</style>
</head>
<body>
<progress value="30" max="100"></progress>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Шкала прогресса в Safari
Шкала с полосками
Используя указанные псевдоэлементы, можно создавать элементы и более сложного вида, к примеру, содержащие полоски, сделанные с помощью градиента (рис. 3).
Рис. 3. Шкала прогресса с полосками
Такие полоски можно создать разными методами, приведём два наиболее распространённых.
Использование repeating-linear-gradient()
Функция repeating-linear-gradient() предназначена для создания повторяющихся градиентов и прекрасно подходит для отображения чередующихся цветов. Первым параметром функции идёт угол 45deg или -45deg, в зависимости от того, куда должны быть направлены полоски — влево или вправо. Угол влияет лишь на эстетическую составляющую, поэтому со значением угла можно смело экспериментировать, получая разные варианты полосок.
Далее указываем первый цвет в следующем виде:
green, green 15px
Эта запись означает, что зелёный цвет начинается от 0 (который подразумевается и его можно не писать) и занимает 15 пикселей. Этот размер, опять же, можно менять по своему предпочтению, делая полоски шире или уже.
Второй, красный цвет, для резкого, а не градиентного перехода, начинается с того же значения размера, где заканчивается зелёный цвет (15px) и тоже длится 15 пикселей, что в сумме и даёт 30px.
red 15px, red 30px
Вот какой стиль получится для красно-зелёной шкалы прогресса.
progress::-webkit-progress-value {
background-image: repeating-linear-gradient(
45deg,
green, green 15px,
red 15px, red 30px);
}
В примере 2 для разнообразия используются прозрачные и полупрозрачные цвета, через которые «проглядывает» цвет фона шкалы.
Пример 2. Использование repeating-linear-gradient()
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>progress</title>
<style>
progress {
--bar: #ddd;
--value: #0d6efd;
--c1: rgb(255 255 255 / 20%);
--c2: transparent;
width: 100%; /* Ширина */
height: 30px; /* Высота */
border: 0; /* Убираем рамку */
}
progress::-webkit-progress-bar {
background: var(--bar); /* Цвет шкалы */
}
progress::-webkit-progress-value {
background: var(--value); /* Цвет значения */
background-image: repeating-linear-gradient(
45deg,
var(--c1), var(--c1) 15px,
var(--c2) 15px, var(--c2) 30px);
}
</style>
</head>
<body>
<progress value="70" max="100"></progress>
</body>
</html>
Использование linear-gradient() и background-size
Второй метод основан на создании градиента с помощью функции linear-gradient() и ограничении размера фона через свойство background-size.
Сама функция linear-gradient() создаёт градиент на весь фон элемента целиком. Поэтому для создания полосок мы сперва ограничиваем фоновую картинку квадратным размером, используя для этого свойство background-size.
progress::-webkit-progress-value {
background-size: 30px 30px;
}
Размер сторон квадрата здесь задан как 30 пикселей, но это значение можно увеличивать (тогда полоски станут широкими) или уменьшать (полоски станут узкими).
По умолчанию фоновая картинка будет повторяться по горизонтали и вертикали, поэтому следует обеспечить её «бесшовность». Это значит, что между картинками не должно быть резкого видимого перехода. Для этого получившийся квадрат делится на четыре равные области, которые закрашиваются разными цветами (рис. 4).
Рис. 4. Полоски
В CSS в итоге это будет выглядеть так.
progress::-webkit-progress-value {
background-size: 30px 30px;
background-image: linear-gradient(
-45deg,
green, green 25%,
red 25%, red 50%,
green 50%, green 75%,
red 75%, red);
}
Данный метод имеет некоторые недостатки:
- полоски должны быть направлены только под углом 45deg или -45deg;
- полоски должны иметь одинаковую ширину.
Если этими правилами пренебречь, то красивые и ровные полоски не получатся.
Итоги
- В Chrome стилизация шкалы прогресса делается через псевдоэлемент ::-webkit-progress-bar.
- За изменение стиля шкалы значения отвечает псевдоэлемент ::-webkit-progress-value.
- Для создания шкалы с чередующимися полосками применяется функция repeating-linear-gradient() в сочетании с указанными псевдоэлементами.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 21.06.2025