@keyframes growProgressBar {
    0%, 33% { --pgPercentage: 0; }
    100% { --pgPercentage: var(--value); }
  }
  
@property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}
  
  /* ----- vert progress bar --------*/
div[role="progressbar-vert"] {
    --size: 3rem;
    --fg: #006F5B;
    --bg: #def;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: 
      radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
      conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--fg);
}
  
div[role="progressbar-vert"]::before {
    counter-reset: percentage var(--value);
    content: counter(percentage) '%';
}
  /* ----- /vert progress bar --------*/
  
  /* ----- blue progress bar --------*/
div[role="progressbar-orange"] {
    --size: 3rem;
    --fg: #F67F00;
    --bg: #def;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: 
      radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
      conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--fg);
}
  
div[role="progressbar-orange"]::before {
    counter-reset: percentage var(--value);
    content: counter(percentage) '%';
}
  /* ----- /blue progress bar --------*/