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-container">
  <div class="progress progress-x"></div>
  <div class="progress progress-y"></div>
</div>

<input class="progress-control" type="range" max="130" value="0">

CSS

.progress-container {
  position: relative;
  width: 300px;
}

.progress-x {
  width: inherit;
}

.progress-y {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
}

.progress-control {
  margin-top: 30px;
  width: 300px;
}


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

.circle-progress-text {
  font-family: sans-serif;
}

.circle-progress-text-max {
  display: none;
}

.progress-x .circle-progress-value,
.progress-x .circle-progress-circle {
  stroke-width: 10px;
}

.progress-x .circle-progress-value {
  stroke: orange;
}

.progress-x .circle-progress-text-value {
  font-size: 9px;
}

.progress-y .circle-progress-value,
.progress-y .circle-progress-circle {
  stroke-width: 12px;
}

.progress-y .circle-progress-value {
  stroke: red;
}

.progress-y .circle-progress-text-value {
  font-size: 11px;
}

JavaScript

const cpBaseOptions = {
	value: 0,
  textFormat: 'valueOnCircle',
  animation: 'none',
}

const cpx = new CircleProgress('.progress-x', {
	...cpBaseOptions,
	max: 100,
})

const cpy = new CircleProgress('.progress-y', {
	...cpBaseOptions,
	max: 30,
})

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