Пончиковая диаграмма на CSS

Пример:

15%

45%

60%

80%

90%

HTML:

<div class="pie" style="--p:15;--f:#BFE2FF">15%</div>
<div class="pie no-round" style="--p:45;--b:15px;--c:#ff891b">45%</div>
<div class="pie no-round" style="--p:60;--c:#b7333b;--w:180px;--b:10px;--f:#0000">60%</div>
<div class="pie pieanimate" style="--p:80;--c:#288f32;--f:#7fdb88">80%</div>
<div class="pie no-round pieanimate" style="--p:90;--b:30px">90%</div>

Переменные:

--p - процентное значение (без знака %)
--b - толщина границы
--w - диаметр
--c - основной цвет
--f - цвет фона

Классы:

pie - главный класс диаграммы
no-round - удаление закругленных краев
pieanimate - анимация (поддерживается не всеми браузерами и запускается сразу, а не в видимой области)

CSS:

.pie {
	--p: 20;
	--b: 20px;
	--w: 150px;
	--c: #337AB7;	
	--f: #eee;
	
	width: var(--w);
	aspect-ratio: 1;
	position: relative;
	display: inline-grid;
	margin: 5px;
	place-content: center;
	font-size: 25px;
	font-weight: bold;
	font-family: sans-serif;
}
.pie:before,
.pie:after {
	content: "";
	position: absolute;
	border-radius: 50%;
}
.pie:before {
	inset: 0;
	background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p) * 1%), var(--f) 0);
	mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}
.pie:after {
	inset: calc(50% - var(--b) / 2);
	background: var(--c);
	transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2));
}
.no-round:before {
	background-size:0 0,auto;
}
.no-round:after {
	content:none;
}
/* Анимация */
@property --p{
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}
.pieanimate {
	animation: p 1s .5s both;
}
@keyframes p {
	from{--p:0}
}

.pie {

--p: 20;

--b: 20px;

--w: 150px;

--c: #337AB7;

--f: #eee;

width: var(--w);

aspect-ratio: 1;

position: relative;

display: inline-grid;

margin: 5px;

place-content: center;

font-size: 25px;

font-weight: bold;

font-family: sans-serif;

}

.pie:before,

.pie:after {

content: "";

position: absolute;

border-radius: 50%;

}

.pie:before {

inset: 0;

background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p) * 1%), var(--f) 0);

mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));

}

.pie:after {

inset: calc(50% - var(--b) / 2);

background: var(--c);

transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2));

}

.no-round:before {

background-size:0 0,auto;

}

.no-round:after {

content:none;

}

/* Анимация */

@property --p{

syntax: '<number>';

inherits: true;

initial-value: 0;

}

.pieanimate {

animation: p 1s .5s both;

}

@keyframes p {

from{--p:0}

}

Как работает данный вариант построения диаграммы можно посмотреть у ее автора Temani Afif в теме How to Create a Pie Chart Using Only CSS. Код я практически не менял, добавив только переменную для фона.

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий: