title: CSS how to change color of circular progress bar as it grows? (Only CSS)
body: <p>I have got this code from Web, pure CSS that allows me to display a growProgressBar in any webpage. What I want to achieve is to change the color based on different html style values.</p>
  <p>From 0 to 20: --fg: red; --bg: pink;</p>
  <p>From 20 to 40: --fg: orange; --bg: peachpuff;</p>
  <p>From 40 to 60: --fg: yellow; --bg: lightyellow;</p>
  <p>From 60 to 80: --fg: royalblue; --bg: lightblue;</p>
  <p>From 80 to 100: --fg: green; --bg: lightgreen;</p>
  <p>There's no need to have it changing the color as it grows, at least use the right one based on the given value.</p>
  <p>This is the CSS and HTML Code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes growProgressBar {
              0%,
              33% {
                  --pgPercentage: 0;
              }
              100% {
                  --pgPercentage: var(--value);
              }
          }
          @property --pgPercentage {
              syntax: '&lt;number&gt;';
              inherits: false;
              initial-value: 0;
          }
          div[role="progressbar"] {
              --size: 12rem;
              --fg: green;
              --bg: lightgreen;
              --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"]::before {
              counter-reset: percentage var(--value);
              content: counter(percentage) '%';
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="--value:90"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>