Как создать круговую диаграмму, используя только CSS

где мы добавляем процентное значение (прогресс круговой диаграммы) в качестве основного содержания:

60% 

Мы также добавляем переменные CSS как встроенные стили. ]% знак). Оно должно быть таким же, как и содержимое.

--b: эта переменная определяет толщину границы.

--c : Эта переменная будет определять основной цвет.

Для этой статьи и демонстрации я использую односимвольную переменную, чтобы код был коротким. Но лучше учитывать более явные переменные при использовании кода в рабочей среде. Примеры: --percentage--border-thickness и --main-color.

Настройки CSS для круговой диаграммы.

Сначала мы начинаем со стиля нашего контента. Эта часть проста, и код выглядит следующим образом:

.pie {
  --w: 150 пикселей;
  ширина: переменная(--w);
  соотношение сторон: 1;
  отображение: встроенная сетка;
  место-содержание: центр;
  поле: 5px;
  размер шрифта: 25px;
  вес шрифта: полужирный;
  семейство шрифтов: без засечек;
}

Я определяю элемент как inline-gridчтобы легко разместить содержимое посередине, используя place-content: center. Мы используем aspect-ratio: 1чтобы убедиться, что элемент остается квадратным. Мы также можем использовать height: var(--w)но всегда полезно изучить и использовать новое свойство CSS.

Вы можете удивиться, почему я использую переменную для определения ширины вместо того, чтобы просто установить  width: 150px. Мне нужно знать значение ширины для будущего использования, поэтому я определяю его как переменную. Весь оставшийся CSS довольно прост для стилизации текста. Не стесняйтесь обновлять его по своему усмотрению.

Давайте перейдем к самой интересной части – основной форме нашего компонента. Для этого мы будем использовать псевдоэлемент со следующими стилями:

.pie:before{
  содержание: "";
  положение: абсолютное;
  радиус границы: 50%;
  вставка: 0;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
}

Псевдоэлемент с position: absolute покрывает всю область благодаря inset: 0. Да, это снова новое свойство CSS, которое является сокращением для toprightbottom и right (которое вы можете прочитать подробнее здесь).

Затем мы делаем его кругом (border-radius: 50%) и применяем conic-gradient(). Обратите внимание на использование переменных CSS, которые мы определили как встроенные стили (--c для цвета и --p для процента). даст нам следующий результат:

Мы получаем ближе! conic-gradient() дает нам двухцветный градиент. От 0% до p% основной цвет, а оставшаяся часть — прозрачный цвет (определяется шестнадцатеричным значением #0000 ).

]Чтобы сохранить только граничную часть, мы будем использовать маскучтобы скрыть среднюю часть. На этот раз мы будем использовать radial-gradient(): calc(100% — var(—b)))

Применение вышеизложенного в качестве фона даст нам следующее:

Обратите внимание на использование переменной --bкоторая определяет толщину границы (показана синим цветом на рисунке выше) .

Теперь представьте, что красная часть является невидимой, а синяя – видимой. Вот что мы получим, если воспользуемся тем же градиентом со свойством mask:

У нас есть круговая диаграмма с одним элементом и несколькими строками кода CSS.

.pie {
  --w:150px;
  
  ширина: переменная(--w);
  соотношение сторон: 1;
  положение: родственник;
  отображение: встроенная сетка;
  место-содержание: центр;
  поле: 5px;
  размер шрифта: 25px;
  вес шрифта: полужирный;
  семейство шрифтов: без засечек;
}
.pie: перед {
  содержание: "";
  положение: абсолютное;
  радиус границы: 50%;
  вставка: 0;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(дальняя сторона,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          маска:радиальный градиент(дальняя сторона,#0000 вычисл(99% - переменная(--b)),#000 вычисл(100% - переменная(--b)));
}

И HTML:

60%

Как добавить закругленные края[1945904]

Для этого я добавлю дополнительный градиентный слой для закругления верхнего края и псевдоэлемент для закругления другого края. Вот иллюстрация, чтобы понять трюк:

Код от (1) до закруглить верхний край:

.pie:before {
  задний план:
    радиальный градиент(дальняя сторона,var(--c) 98%,#0000) top/var(--b) var(--b) без повторов,
    конический градиент (var (--c) calc (var (--p) * 1%), # 0000 0);
}

В дополнение к conic-gradient() мы добавляем radial-gradient()размещенный вверху и имеющий размер, равный толщина границы определяется --b.

Код для (2) округления другого края:

.pie:after {
  содержание: "";
  положение: абсолютное;
  радиус границы: 50%;
  вставка: вычисл(50% - var(--b)/2);
  фон: var(--c);
  transform: rotate(calc(var(-p)*3.6deg)) translate(calc(50% - var(--w)/2));
}

Свойство inset устанавливает размер псевдоэлемента равным --b. Помните, что это сокращение для верхнегоправогонижнего и левого. Если у нас

влево = вправо = 50% - b/2

это означает, что с каждой стороны мы движемся к центру минус смещение, равное . ]b/2 — таким образом, мы получаем ширину, равную 2*b/2 = b. Та же логика для высоты. Теперь нам нужно правильно разместить наш элемент, поэтому мы используем свойство преобразования. Наш элемент изначально расположен в центре, поэтому нам нужно сначала повернуть его. Имея процент, мы используем «Правило трех», чтобы получить угол:

угол = процент*360 градусов/100

Затем мы делаем перевод, и здесь мы потребуется ширина, потому что мы должны выполнить перевод на половину ширины (w/2). Ниже приведена иллюстрация, чтобы понять логику свойства преобразования. элемент с основным цветом --c и все готово. У нас есть наша круговая диаграмма с закругленными краями. Для этого мы анимируем процентное значение --p от 0 до определенного значения. По умолчанию мы не можем анимировать переменные CSS, но благодаря новой функции @property теперь это возможно. -п{
синтаксис: '';
наследует: истина;
начальное значение: 0;
}

Создаем ключевые кадры:

@keyframes p {
  от {--p:0}
}

Обратите внимание, что нам нужно указать только от. При этом браузер сделает значение to равным по умолчанию значению, которое мы определили (

60%

).

И, наконец, , мы называем анимацию. Вы можете определить продолжительность/задержку по своему усмотрению.

анимация: p 1 с .5 с оба;

К сожалению, этот метод не получил широкой поддержки. Вы можете протестировать его в браузерах на основе Chromium (Chrome и Edge), но он не будет работать в Firefox и Safari. Вы можете проверить Могу ли я использовать, чтобы отслеживать поддержку. Вы можете видеть, что я использую два класса для управления закругленными краями и анимацией, поэтому мы можем легко добавлять/удалять их по мере необходимости.

 20%
 40%
 60%
 80%
 90%

@property --p{
  синтаксис: '';
  наследует: истина;
  начальное значение: 1;
}

.пирог {
  --p:20;
  --b:22px;
  --c:темно-красный;
  --w:150px;

  ширина: переменная(--w);
  соотношение сторон: 1;
  положение: родственник;
  отображение: встроенная сетка;
  поле: 5px;
  место-содержание: центр;
  размер шрифта: 25px;
  вес шрифта: полужирный;
  семейство шрифтов: без засечек;
}
.pie: до,
.пирог: после {
  содержание: "";
  положение: абсолютное;
  радиус границы: 50%;
}
.pie: перед {
  вставка: 0;
  задний план:
    радиальный градиент(дальняя сторона,var(--c) 98%,#0000) top/var(--b) var(--b) без повторов,
    конический градиент (var (--c) calc (var (--p) * 1%), # 0000 0);
  -webkit-mask: радиальный градиент(дальняя сторона,#0000 вычисл(99% - var(--b)),#000 вычисл(100% - var(--b)));
          маска: радиальный градиент(дальняя сторона,#0000 вычисл(99% - var(--b)),#000 вычисл(100% - var(--b)));
}
.пирог: после {
  вставка: вычисл(50% - var(--b)/2);
  фон: var(--c);
  transform: rotate(calc(var(-p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.анимация {
  анимация: п 1с .5с оба;
}
.no-раунд: до {
  размер фона: 0 0, авто;
}
.без раунда: после {
  содержание: нет;
}
@ключевые кадры п{
  от{--стр:0}
}

Спасибо за внимание! Вы можете купить мне кофе