как подобное правильно реализовать? Делал через картинки (но это не правильно), сама суть, чтобы поле для заливки градиента было динамичным, то есть - захотел выставил 93%, захотел 2% и тд.
2 ответа
Угловой градиент можно создать с помощью conic-gradient
:
.pie {
background: conic-gradient(aqua, lime);
border-radius: 50%
}
Примеры других градиентов - здесь. И там же - инструкция по подключению на сайт. Дело в том, что conic-gradient
на данный момент лишь принят W3C как часть CSS4 Images (ссылка). Браузеры его пока не поддерживают. Но использовать его можно уже сейчас с помощью полифила.
С динамичным формированием диаграммы - сложнее. В CSS популярное решение - использовать для диаграммы две заготовленные половинки окружности:
И, если нужно больше 50% заполненности - используются обе половинки. Если меньше 50% - одна. Решается это установкой дополнительного класса (например, .big
, для .pie
).
Скорее всего, нужен будет небольшой js-скрипт, который будет смотреть, сколько %-заполненности установлено у .pie
, и будет ставить, или не ставить, дополнительный класс.
-
-
В ответе фраза про поддержку в браузерах - ссылка: caniuse.com/#feat=css-gradients - но сейчас проверю в других источниках, уточню 8 сен 2016 в 18:04
-
Да, вы были правы, спасибо за подсказку.
conic-gradient
пока работает лишь с полифилом. Дополнил ответ. 8 сен 2016 в 18:12
Вот этот прогресс бар должен подойти https://github.com/kottenator/jquery-circle-progress Демо: http://kottenator.github.io/jquery-circle-progress/
Либо найти по запросу progressbar circle