Верстаем сложный прогрессбар в 2026 году

Раньше, чтобы сделать круговой прогрессбар, мы страдали с SVG. Мне до сих пор больно заглядывать в инспектор на старых реализациях. Сегодня всё кардинально упростилось.

Современный CSS позволяет собрать сложный, гибкий и красивый круговой прогрессбар буквально на одном div и на одном CSS‑свойстве. И всё это — с отличной браузерной поддержкой.

В этой статье я разберу именно этот приём. Сначала — ключевую идею подхода, затем — возможности кастомизации, после этого добавлю немного визуальной «дороговизны», удобные ручки управления и экспериментальную CSS‑логику. Да‑да, напоследок мы немного попрограммируем на CSS!

Ключевой приём и базовая реализация

Начнём с главного. Вся реализация строится вокруг одного элемента:

<div class="progress"></div>

И одного свойства — background-image с несколькими фоновыми изображениями. Ключевой приём заключается в следующем:

• верхний фон — радиальный градиент, который формирует форму шкалы;

• нижний фон — конический градиент, который отвечает за заполнитель.

Вот базовый CSS:

.progress {
  width: 150px;
  height: 150px;
  background-image:
    radial-gradient(
      circle,
      #222 0% 27%,
      transparent 28% 50%,
      #222 51%
    ),
    conic-gradient(
      #D64E42 0% 60%,
      transparent 60%
    );
}

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

Важно, здесь используются старые, если не сказать «древние», CSS‑технологии: множественные фоновые изображения, радиальный и конический градиенты с резкими переходами цветов.

Кастомизация: ширина шкалы и прозрачность

Одна из приятных особенностей этого подхода — он очень легко кастомизируется.

Ширина шкалы — задаётся параметрами верхнего, радиального, градиента. Для этого играем с позициями цвета в колорстопах:

radial-gradient(
  circle,
  #222 0% 30%,
  transparent 31% 54%,
  #222 55%
)

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

conic-gradient(
  rgba(214, 78, 66, 0.6) 0% 60%,
  transparent 60%
)

Никаких дополнительных элементов, масок или вычислений. Только параметры градиентов.

Хэштег #неколхоз: текстура, рамки и тени

Базовая версия готова, но выглядит довольно колхозно. Добавим немного «дороговизны».

Во‑первых, добавим третий фоновый слой — повторяющийся конически градиент, который создаёт эффект радиальных секций:

repeating-conic-gradient(
  rgba(0, 0, 0, 0.3),
  rgba(0, 0, 0, 0.2) 4.5%,
  transparent 5%
)

Во‑вторых, усложним верхний радиальный градиент, добавив промежуточные цвета для тонких рамок:

radial-gradient(
  circle,
  #222 0% 27%,
  #333,
  transparent 28% 50%,
  #333,
  #222 51%
)

И в финале — слегка закруглим сам блок прогрессбара и добавим тени:

.progress {
  border-radius: 10px;
  box-shadow: inset 0 0 1px #666, 0 0 30px black;
}

Всё это не влияет на логику компонента — только на внешний вид.

Ручки управления: CSS-переменные

Теперь давайте сделаем прогрессбар удобным для использования в реальных интерфейсах. Для этого добавим CSS‑переменную --progress.

.progress {
  --progress: 45;
  --corner: calc(1% * var(--progress, 0));
  background-image:
    radial-gradient(
      circle,
      #222 0% 27%,
      #333,
      transparent 28% 50%,
      #333,
      #222 51%
    ),
    conic-gradient(
      #D64E42 0% var(--corner),
      transparent var(--corner)
  );
}

Теперь прогресс задаётся понятным числом от 0 до 100, а CSS сам пересчитывает его в нужный угол.

Можно легко создать несколько экземпляров компонента:

<div class="progress" style="--progress: 15"></div>
<div class="progress" style="--progress: 50"></div>
<div class="progress" style="--progress: 90"></div>

Экспериментальные CSS-фичи: условная логика

А теперь давайте немного заглянем в будущее CSS. В современных версиях Chrome уже можно использовать условную логику с помощью if().

Например, можно менять цвет шкалы в зависимости от значения прогресса:

.progress {
  --color: if(
    style(--progress <= 33): #D64E42;
    style(--progress <= 66): #F5B848;
    style(--progress <= 99): #58B473;
    else: white;
  );
}

И использовать этот цвет в градиенте:

conic-gradient(
  var(--color) 0% var(--corner),
  transparent var(--corner)
)

Можно добавить подпись в центре прогрессбара, которая меняется в зависимости от значения прогресса. Добавляем псевдоэлемент, используем if() в свойстве content, чтобы привязать текст подписи к значениям прогресса. Для цвета подписи используем CSS‑переменную --color из родителя.

.progress {
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress::before {
  content: if(
    style(--progress <= 33): "low";
    style(--progress <= 66): "med";
    style(--progress <= 99): "high";
    else: "go!";
  );
  color: var(--color);
}

Важно: это экспериментальные возможности. Если нужна хорошая поддержка, то используйте JS вместе с классами‑модификаторами.

Вау-эффект: нативная анимация

И напоследок — самое приятное. Этот прогрессбар отлично совместим с нативной CSS‑анимацией.

Для этого регистрируем переменную --progress:

@property --progress {
  inherits: true;
  initial-value: 0;
  syntax: "<number>";
}

И анимируем её:

.progress {
  animation: progress 10s infinite alternate;
}

@keyframes progress {
  to {
    --progress: 100;
  }
}

Во время анимации автоматически меняется:

• размер заполнителя,

• цвет шкалы,

• подпись в центре.

То есть все стили, завязанные на --progress, тоже пересчитываются на лету, когда нативная анимация меняет значение переменной.

Заключение

Ключевой приём во всей этой истории — множественные фоны с радиальным и коническим градиентами. Он прост, хорошо поддерживается и даёт большую гибкость.

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

Если нужен надёжный продакшен‑компонент — используйте базовый приём. Если хочется поэкспериментировать и поддержка позволяет — используйте новые возможности. Они доступны в свежих версиях Chrome.

Надеюсь, вам будет приятнее делать прогрессбары в 2026 году!

Подписывайтесь на мой телеграм‑канал «CSS Боль», если хотите ещё больше интересного современного CSS и задавайте вопросы в комментариях.