Comments 19
У сожалению, наверняка этот if никто не имплементирует
В принципе, эту же логику на чистом CSS можно сделать и без if, и без range syntax. На обычных стилевых контейнерных запросах. У них поддержка намного лучше.
И единственная проблема — это FF, который всё не может зарелизить стилевые контейнерные запросы даже в самой простой версии. Но при этом более сложные размерные контейнерные запросы в FF есть. Так что верим, что и стилевые сделают.
Можно было бы стилизовать нативные элементы progress и meter. Но там больше дополнительных действий по убиранию оформления по умолчанию
Интересный вариант реализации 👍
А можем ли мы сделать этот прогресс со скруглением?
Раньше, чтобы сделать круговой прогрессбар, мы страдали с SVG
Увы, и сейчас приходится, если хочется сделать универсально. Например, всё то же самое, что у вас, но с round caps (без этих десяточных вайбов с прямыми углами) и градиентной кольцевой заливкой. По крайней мере, когда я просил помощи у SO, чтобы помогли переписать с SVG на pure CSS, так никто ничего толком и не предложил.
Согласен, что как только появляются сложные формы шкалы/заполнителя, то приходится использовать SVG. Особенно если это неправильные формы, не воспроизводимые простой геометрией. Только такие вещи вряд ли можно назвать универсальными. Под любой такой сложный прогрессбар надо рисовать отдельную SVG.
Просто раньше и прогрессбары на простых формах тоже приходилось делать на SVG, а сейчас CSS забрал эту головную боль. А ещё дал разработчику важный аргумент в разговоре с дизайнером: "Хочешь так же сложно как нарисовал? Ок, готовь мне сам векторную заготовку. А если чуть упростим, то я сам всё сделаю."
А вообще, интересно посмотреть глазами на примеры, о которых вы говорите
Универсальный в том смысле, что можно выбрать градиент и капс. Через переменные (--).
А вообще, интересно посмотреть глазами на примеры, о которых вы говорите
Спасибо за пример! На первый взгляд выглядит реализуемо на CSS и даже несильно сложно. Покумекаю, и если получится, сделаю ещё статью. Не уверен насчёт лёгкой настройки капса, но может и это получится
Насколько я смог дойти своим мозгом, скругления краев прогресс бара не возможно организовать при помощи радиальных градиентов, только svg
Вот что-то такое получилось. Но решение, конечно, усложнилось
Симпатично.
Понял, что последнее время прогрессбаров особо и не вижу, ответы приносит ИИ (или не приносит), но бара при это не показывает.
Даже обидно!
Сложный прогрессбар, это habr.com/ru/companies/2gis/articles/275489
Круто, для меня самое время вспомнить как комуниздить код хах
Чуток покопипастил и соорудил развитие этой фичи
Может в vanilla CSS дело и до for() дойдёт, чтобы препроцессоры не применять...
.progress::before {
content: if(
style(--progress <= 0): "0%";
style(--progress <= 1): "1%";
style(--progress <= 2): "2%";
style(--progress <= 3): "3%";
style(--progress <= 4): "4%";
style(--progress <= 5): "5%";
style(--progress <= 6): "6%";
style(--progress <= 7): "7%";
style(--progress <= 8): "8%";
style(--progress <= 9): "9%";
style(--progress <= 10): "10%";
style(--progress <= 11): "11%";
style(--progress <= 12): "12%";
style(--progress <= 13): "13%";
style(--progress <= 14): "14%";
style(--progress <= 15): "15%";
style(--progress <= 16): "16%";
style(--progress <= 17): "17%";
style(--progress <= 18): "18%";
style(--progress <= 19): "19%";
style(--progress <= 20): "20%";
style(--progress <= 21): "21%";
style(--progress <= 22): "22%";
style(--progress <= 23): "23%";
style(--progress <= 24): "24%";
style(--progress <= 25): "25%";
style(--progress <= 26): "26%";
style(--progress <= 27): "27%";
style(--progress <= 28): "28%";
style(--progress <= 29): "29%";
style(--progress <= 30): "30%";
style(--progress <= 31): "31%";
style(--progress <= 32): "32%";
style(--progress <= 33): "33%";
style(--progress <= 34): "34%";
style(--progress <= 35): "35%";
style(--progress <= 36): "36%";
style(--progress <= 37): "37%";
style(--progress <= 38): "38%";
style(--progress <= 39): "39%";
style(--progress <= 40): "40%";
style(--progress <= 41): "41%";
style(--progress <= 42): "42%";
style(--progress <= 43): "43%";
style(--progress <= 44): "44%";
style(--progress <= 45): "45%";
style(--progress <= 46): "46%";
style(--progress <= 47): "47%";
style(--progress <= 48): "48%";
style(--progress <= 49): "49%";
style(--progress <= 50): "50%";
style(--progress <= 51): "51%";
style(--progress <= 52): "52%";
style(--progress <= 53): "53%";
style(--progress <= 54): "54%";
style(--progress <= 55): "55%";
style(--progress <= 56): "56%";
style(--progress <= 57): "57%";
style(--progress <= 58): "58%";
style(--progress <= 59): "59%";
style(--progress <= 60): "60%";
style(--progress <= 61): "61%";
style(--progress <= 62): "62%";
style(--progress <= 63): "63%";
style(--progress <= 64): "64%";
style(--progress <= 65): "65%";
style(--progress <= 66): "66%";
style(--progress <= 67): "67%";
style(--progress <= 68): "68%";
style(--progress <= 69): "69%";
style(--progress <= 70): "70%";
style(--progress <= 71): "71%";
style(--progress <= 72): "72%";
style(--progress <= 73): "73%";
style(--progress <= 74): "74%";
style(--progress <= 75): "75%";
style(--progress <= 76): "76%";
style(--progress <= 77): "77%";
style(--progress <= 78): "78%";
style(--progress <= 79): "79%";
style(--progress <= 80): "80%";
style(--progress <= 81): "81%";
style(--progress <= 82): "82%";
style(--progress <= 83): "83%";
style(--progress <= 84): "84%";
style(--progress <= 85): "85%";
style(--progress <= 86): "86%";
style(--progress <= 87): "87%";
style(--progress <= 88): "88%";
style(--progress <= 89): "89%";
style(--progress <= 90): "90%";
style(--progress <= 91): "91%";
style(--progress <= 92): "92%";
style(--progress <= 93): "93%";
style(--progress <= 94): "94%";
style(--progress <= 95): "95%";
style(--progress <= 96): "96%";
style(--progress <= 97): "97%";
style(--progress <= 98): "98%";
style(--progress <= 99): "99%";
else: "100%";
);
color: var(--color);
}
Верстаем сложный прогрессбар в 2026 году