6

введите сюда описание изображения

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

2 ответа 2

9

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

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

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

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

введите сюда описание изображения

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

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

3
  • А какая поддержка браузерами у conic-gradient?
    – soledar10
    8 сен 2016 в 17:55
  • В ответе фраза про поддержку в браузерах - ссылка: caniuse.com/#feat=css-gradients - но сейчас проверю в других источниках, уточню 8 сен 2016 в 18:04
  • Да, вы были правы, спасибо за подсказку. conic-gradient пока работает лишь с полифилом. Дополнил ответ. 8 сен 2016 в 18:12
3

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

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

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.