Угловой градиент как?

#html #css

как подобное правильно реализовать?
Делал через картинки (но это не правильно), сама суть, чтобы поле для заливки градиента
было динамичным, то есть - захотел выставил 93%, захотел 2% и тд. 
    

Ответы

Ответ 1

Угловой градиент можно создать с помощью conic-gradient:

.pie {
  background: conic-gradient(aqua, lime);
  border-radius: 50%
}


Примеры других градиентов - здесь. И там же - инструкция по подключению на сайт.
Дело в том, что conic-gradient на данный момент лишь принят W3C как часть CSS4 Images
(ссылка). Браузеры его пока не поддерживают. Но использовать его можно уже сейчас с
помощью полифила.

С динамичным формированием диаграммы - сложнее. В CSS популярное решение - использовать
для диаграммы две заготовленные половинки окружности:



И, если нужно больше 50% заполненности - используются обе половинки. Если меньше
50% - одна. Решается это установкой дополнительного класса (например, .big, для .pie).

Скорее всего, нужен будет небольшой js-скрипт, который будет смотреть, сколько %-заполненности
установлено у .pie, и будет ставить, или не ставить, дополнительный класс.


Ответ 2

Вот этот прогресс бар должен подойти https://github.com/kottenator/jquery-circle-progress
Демо: http://kottenator.github.io/jquery-circle-progress/

Либо найти по запросу progressbar circle