как подобное правильно реализовать?
Делал через картинки (но это не правильно), сама суть, чтобы поле для заливки градиента было динамичным, то есть - захотел выставил 93%, захотел 2% и тд.
Ответ
Угловой градиент можно создать с помощью conic-gradient
.pie {
background: conic-gradient(aqua, lime);
border-radius: 50%
}
Примеры других градиентов - здесь. И там же - инструкция по подключению на сайт. Дело в том, что conic-gradient на данный момент лишь принят W3C как часть CSS4 Images (ссылка). Браузеры его пока не поддерживают. Но использовать его можно уже сейчас с помощью полифила
С динамичным формированием диаграммы - сложнее. В CSS популярное решение - использовать для диаграммы две заготовленные половинки окружности:
И, если нужно больше 50% заполненности - используются обе половинки. Если меньше 50% - одна. Решается это установкой дополнительного класса (например, .big, для .pie).
Скорее всего, нужен будет небольшой js-скрипт, который будет смотреть, сколько %-заполненности установлено у .pie, и будет ставить, или не ставить, дополнительный класс.
Комментариев нет:
Отправить комментарий