CircleProgress - Double Trouble

Two Circle Progresses layered on top of each other can create a chained effect.

by tikosar

HTML

<script src="https://cdn.jsdelivr.net/gh/tigrr/[email protected]/dist/circle-progress.min.js"></script>
<div class="progress"></div>

<input class="progress-control" type="range" max="50" value="33">

CSS

/* Circle Progress styles */
.circle-progress {
  display: block;
  width: 300px;
  height: auto;
}

/* Graphics */
.circle-progress-value,
.circle-progress-circle {
  stroke-width: 5px;
}

.circle-progress-circle {
  stroke: #f3f0f9;
}

.circle-progress-value {
  stroke: #854afa;
  stroke-linecap: round;
}

/* Texts */
.circle-progress-text {
  font-family: sans-serif;
  fill: #403b35;
}

.circle-progress-value-number {
  font-size: 24px;
  font-weight: bold;
  white-space: pre;
}

.circle-progress-percent {
  font-size: 10px;
  transform: translateY(-100%);
  fill: hsl(0 0% 70%);
}

.circle-progress-absolute-values {
  font-size: 10px;
  fill: hsl(0 0% 70%);
}


/* Other styles */
.progress-control {
  margin-top: 30px;
  width: 300px;
  accent-color: #854afa;
}

JavaScript

const cp = new CircleProgress('.progress', {
	value: 33,
	max: 50,
 	textFormat: (value, max) => `
		<tspan class="circle-progress-value-number" dx="7px">${Math.round(value / max * 100)}</tspan><tspan class="circle-progress-percent" dy="-1em">%</tspan>
		<tspan class="circle-progress-absolute-values" x="50" y="50" dy="2.1em">${value}/${max}</tspan>
	`,
	animation: 'none',
})

document.querySelector('.progress-control').addEventListener('input', function() {
  const value = Number(this.value)
  cp.value = value
})