html - Porcentaje de gráfico circular con css solamente

charts pie-chart

Question

He encontrado un "porcentaje de gráfico circular" bastante bueno y quiero crearlo solo con CSS. No se requiere animación. Sólo estática "imagen".

Entiendo que si quiero crear este tipo de gráfico necesito usar elementos como estos

Las preguntas son

1. ¿Cómo crear el elemento # 2?
2. ¿Cómo administrar la forma del elemento # 2 para valores de porcentaje más pequeños (5%) o más altos (80%)?

Answer 1

Puedes hacer esto con múltiples antecedentes.

Del 0% al 50% :

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  border-radius: 50%;
  border: 5px solid transparent;
  background: 
    linear-gradient(#ccc, #ccc) padding-box, 
    linear-gradient(var(--v), #f2f2f2 50%, transparent 0) border-box,
    linear-gradient(to right, #f2f2f2 50%, blue 0) border-box;
}

<div class="box" style="--v:-90deg"></div><!-- 0% -->
<div class="box" style="--v:-45deg"></div><!-- 12.5% -->
<div class="box" style="--v:  0deg"></div><!-- 25% -->
<div class="box" style="--v: 45deg"></div><!-- 37.5% -->
<div class="box" style="--v: 90deg"></div><!-- 50% -->

<p>The formula is [p = (18/5) * x - 90]. <small>Where x is the percentage and p the degree</small></p>
<p>for x = 5% --> p = -72deg </p>
<div class="box" style="--v:-72deg"></div>

Del 50% al 100% :

.box {
  width:100px;
  height:100px;
  display:inline-block;
  border-radius:50%;
  border:5px solid transparent;
  background:
    linear-gradient(#ccc,#ccc) padding-box,
    linear-gradient(var(--v), blue 50%,transparent 0) border-box,
    linear-gradient(to right, #f2f2f2 50%,blue 0) border-box;
}

<div class="box" style="--v:-90deg"></div><!-- 50% -->
<div class="box" style="--v:-45deg"></div><!-- 62.5% -->
<div class="box" style="--v:  0deg"></div><!-- 75% -->
<div class="box" style="--v: 45deg"></div><!-- 87.5% -->
<div class="box" style="--v: 90deg"></div><!-- 100% -->

<p>The formula is [p = (18/5) * x - 270]. <small>Where x is the percentage and p the degree</small></p>
<p>for x = 80% --> p = 18deg </p>
<div class="box" style="--v:18deg"></div>

Puedes combinar tanto como esto:

.box {
  width:100px;
  height:100px;
  display:inline-block;
  border-radius:50%;
  border:5px solid transparent;
  background:
    linear-gradient(#ccc,#ccc) padding-box,
    linear-gradient(var(--v), #f2f2f2 50%,transparent 0) center/calc(var(--s)*100%) border-box,
    linear-gradient(var(--v), blue 50%,transparent 0) center/calc(100% - var(--s)*100%) border-box,
    linear-gradient(to right, #f2f2f2 50%,blue 0) border-box;
}

<div class="box" style="--v:-90deg;--s:1"></div>
<div class="box" style="--v:0deg;--s:1"></div>
<div class="box" style="--v:90deg;--s:1"></div>
<div class="box" style="--v:0deg;--s:0"></div>
<div class="box" style="--v:90deg;--s:0"></div>

Answer 2

Usando el nuevo gradiente cónico , esto se puede administrar con un solo div que acaba de aterrizar en Chrome como una propiedad experimental.

Imagen del resultado

:root {
  --size: 100px;
  --bord: 10px;
}

.chart {
  width: var(--size);
  height: var(--size);
  margin: 1em auto;
  border-radius: 50%;
  background-image: conic-gradient(lightseagreen var(--value), lightgrey var(--value));
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--bord));
  height: calc(100% - var(--bord));
  background: white;
  border-radius: inherit;
}

p {
  position: relative;
  z-index: 1;
  font-size: 2em;
}

.x-60 {
  --value: 60%;
}

.x-20 {
  --value: 20%;
}

<div class="chart x-60">
  <p>60%</p>
</div>

<div class="chart x-20">
  <p>20%</p>
</div>

Gracias a Temani Afif es posible lograr esto sin el pseudo elemento utilizando un borde y aprovechando background-clip ...

 background: 
    linear-gradient(white,white) padding-box,
    conic-gradient(lightseagreen var(--value), lightgrey var(--value)) border-box;

:root {
  --size: 100px;
  --bord: 10px;
}

.chart {
  width: var(--size);
  height: var(--size);
  margin: 1em auto;
  border: var(--bord) solid transparent;
  border-radius: 50%;
  background: linear-gradient(white, white) padding-box, conic-gradient(lightseagreen var(--value), lightgrey var(--value)) border-box;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.x-60 {
  --value: 60%;
}

.x-20 {
  --value: 20%;
}

<div class="chart x-60">
  <p>60%</p>
</div>

<div class="chart x-20">
  <p>20%</p>
</div>