<figure>
  <p style="--value: 50%; --barColour: RebeccaPurple;">50%</p>
  <figcaption>Work day remaining</figcaption>
</figure>

<figure>
  <p style="--value: 75%; --barColour: olive;">75%</p>
  <figcaption>Current biscuit level</figcaption>
</figure>

<figure>
  <p style="--value: 42%; --barColour: MediumSeaGreen;">42%</p>
  <figcaption>Time until next snack</figcaption>
</figure>

<figure>
  <p style="--value: 89%; --barColour: CadetBlue;">89%</p>
  <figcaption>Updates complete</figcaption>
</figure>

<figure>
  <p style="
     --value:  10%; --barColour:  LightCoral;
     --value2: 17%; --barColour2: DarkSalmon;
     --value3: 21%; --barColour3: LightSalmon;
     --value4: 31%; --barColour4: FireBrick;
     --value5: 75%; --barColour5: Crimson;
     --value6: 98%; --barColour6: IndianRed;
  ">&nbsp;</p>
  <figcaption>Multiple figures</figcaption>
</figure>

:root {
  --bg: #eee;
}

body {
  background: var(--bg);
  color: #111;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 2em;
  line-height: 1.6;
  @media (min-width: 60em) {
    display: flex;
  }
}

@media (min-width: 60em) {
  figure {
    flex: 1;
  }
}

figure {
  border: solid .1em #ddd;
  padding: 1em;
}

p {
  align-items: center; 
  aspect-ratio: 1;
  background:
     conic-gradient(var(--bg) 0, var(--bg) 0) padding-box,
     conic-gradient(
       var(--barColour) var(--value),
       var(--barColour2, transparent) var(--value) var(--value2, 100%),
       var(--barColour3, transparent) var(--value2, 100%) var(--value3, 100%),
       var(--barColour4, transparent) var(--value3, 100%) var(--value4, 100%),
       var(--barColour5, transparent) var(--value4, 100%) var(--value5, 100%),
       var(--barColour6, transparent) var(--value5, 100%) var(--value6, 100%),
       transparent var(--value6, 100%) 100%
     ) border-box;
  // This transparent border represents the width of the doughnut
  border: solid 1em transparent;
  border-radius: 50%;
  display: flex;
  flex: 1;
  font-weight: bold;
  justify-content: center;
  margin: 1em;
  padding: 1em;
  text-align: center;
}