AlexPershin9 янв в 14:22

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

Средний

5 мин

12K

CSS * Веб-разработка * Веб-дизайн *

+32

Комментарии 12

Krokochik 9 янв в 17:23

У сожалению, наверняка этот if никто не имплементирует

AlexPershin 9 янв в 18:34

В принципе, эту же логику на чистом CSS можно сделать и без if, и без range syntax. На обычных стилевых контейнерных запросах. У них поддержка намного лучше.

И единственная проблема — это FF, который всё не может зарелизить стилевые контейнерные запросы даже в самой простой версии. Но при этом более сложные размерные контейнерные запросы в FF есть. Так что верим, что и стилевые сделают.

monochromer 9 янв в 20:21

Можно было бы стилизовать нативные элементы progress и meter. Но там больше дополнительных действий по убиранию оформления по умолчанию

AlexPershin 9 янв в 20:55

Так-то да, но фокусировался на визуале

Yrsafam вчера в 04:14

Интересный вариант реализации 👍

А можем ли мы сделать этот прогресс со скруглением?

AlexPershin вчера в 07:21

Спасибо. По идее, да. Правда, реализация усложнится. Похоже, еще одну статью напишу =)

ImagineTables 23 часа назад

Раньше, чтобы сделать круговой прогрессбар, мы страдали с SVG

Увы, и сейчас приходится, если хочется сделать универсально. Например, всё то же самое, что у вас, но с round caps (без этих десяточных вайбов с прямыми углами) и градиентной кольцевой заливкой. По крайней мере, когда я просил помощи у SO, чтобы помогли переписать с SVG на pure CSS, так никто ничего толком и не предложил.

AlexPershin 16 часов назад

Согласен, что как только появляются сложные формы шкалы/заполнителя, то приходится использовать SVG. Особенно если это неправильные формы, не воспроизводимые простой геометрией. Только такие вещи вряд ли можно назвать универсальными. Под любой такой сложный прогрессбар надо рисовать отдельную SVG.

Просто раньше и прогрессбары на простых формах тоже приходилось делать на SVG, а сейчас CSS забрал эту головную боль. А ещё дал разработчику важный аргумент в разговоре с дизайнером: "Хочешь так же сложно как нарисовал? Ок, готовь мне сам векторную заготовку. А если чуть упростим, то я сам всё сделаю."

А вообще, интересно посмотреть глазами на примеры, о которых вы говорите