atnbueno · October 23, 2021 15:06
diff --git a/circular-progress-bar.html b/circular-progress-bar.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="utf-8">
  <style>
    /*
     * Parametrized pure CSS circular progress bar v2.0
     * by Antonio Bueno github.com/atnbueno
     *
     * The content of this file is licensed under the terms
     * of the MIT license: opensource.org/licenses/MIT
     */

    :root {
      /* Value: 0-100 */
      --value: 0;
      /* Colors */
      --background: #222;
      --bar-colors: red 25%, yellow 50%, green 75%;
      --ring-color: #666;
      --text-colors: red 30%, yellow 55%, green 80%;
      /* Other parameters */
      --font: 'Arial Rounded MT Bold';
      --size: 640px;
      --width: 64px;
    }

    html,
    body,
    .percentage {
      background-color: var(--background);
      display: grid;
      font-family: var(--font);
      height: 100%;
      margin: 0;
      padding: 0;
      place-items: center;
      text-align: center;
    }

    .progress {
      --percentage: calc(var(--value) * 1%);
      background-image: conic-gradient(var(--bar-colors));
      border-radius: 50%;
      height: var(--size);
      position: relative;
      width: var(--size);
    }

    .progress:before {
      background-image: conic-gradient(transparent var(--percentage), var(--ring-color) var(--percentage));
      border-radius: 50%;
      content: "";
      height: var(--size);
      left: 0;
      position: absolute;
      width: var(--size);
    }

    .percentage {
      --inner-size: calc(var(--size) - 2 * var(--width));
      border-radius: 50%;
      font-size: calc(var(--inner-size) / 3);
      height: var(--inner-size);
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: var(--inner-size);
    }

    .percentage:after {
      -webkit-text-fill-color: transparent;
      background-clip: text;
      background-image: linear-gradient(to right, var(--text-colors));
      background-position: var(--percentage);
      background-size: 100000%;
      content: counter(value) '%';
      counter-reset: value calc(var(--value));
    }
  </style>
  <title>Parametrized pure-CSS circular progress bar</title>
 </head>

 <body>
  <div class="progress">
    <div class="percentage">
    </div>
  </div>
  <!-- <script>
    // Uncomment to see a 200-step 5-second animation from 0% to 100%
    setInterval(function(){
      let percentage = getComputedStyle(document.documentElement).getPropertyValue('--value');
      if (percentage < 100) {
        percentage = 1 * percentage + 0.5;
        document.documentElement.style.setProperty('--value', percentage);
      }
    }, 25);
  </script> -->
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<style>
	/*
	* Parametrized pure CSS circular progress bar v2.0
	* by Antonio Bueno github.com/atnbueno
	*
	* The content of this file is licensed under the terms
	* of the MIT license: opensource.org/licenses/MIT
	*/

	:root {
	/* Value: 0-100 */
	--value: 0;
	/* Colors */
	--background: #222;
	--bar-colors: red 25%, yellow 50%, green 75%;
	--ring-color: #666;
	--text-colors: red 30%, yellow 55%, green 80%;
	/* Other parameters */
	--font: 'Arial Rounded MT Bold';
	--size: 640px;
	--width: 64px;
	}

	html,
	body,
	.percentage {
	background-color: var(--background);
	display: grid;
	font-family: var(--font);
	height: 100%;
	margin: 0;
	padding: 0;
	place-items: center;
	text-align: center;
	}

	.progress {
	--percentage: calc(var(--value) * 1%);
	background-image: conic-gradient(var(--bar-colors));
	border-radius: 50%;
	height: var(--size);
	position: relative;
	width: var(--size);
	}

	.progress:before {
	background-image: conic-gradient(transparent var(--percentage), var(--ring-color) var(--percentage));
	border-radius: 50%;
	content: "";
	height: var(--size);
	left: 0;
	position: absolute;
	width: var(--size);
	}

	.percentage {
	--inner-size: calc(var(--size) - 2 * var(--width));
	border-radius: 50%;
	font-size: calc(var(--inner-size) / 3);
	height: var(--inner-size);
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--inner-size);
	}

	.percentage:after {
	-webkit-text-fill-color: transparent;
	background-clip: text;
	background-image: linear-gradient(to right, var(--text-colors));
	background-position: var(--percentage);
	background-size: 100000%;
	content: counter(value) '%';
	counter-reset: value calc(var(--value));
	}
	</style>
	<title>Parametrized pure-CSS circular progress bar</title>
	</head>

	<body>
	<div class="progress">
	<div class="percentage">
	</div>
	</div>
	<!-- <script>
	// Uncomment to see a 200-step 5-second animation from 0% to 100%
	setInterval(function(){
	let percentage = getComputedStyle(document.documentElement).getPropertyValue('--value');
	if (percentage < 100) {
	percentage = 1 * percentage + 0.5;
	document.documentElement.style.setProperty('--value', percentage);
	}
	}, 25);
	</script> -->
	</body>

	</html>