CircleProgress - Currency Format

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="130" value="0" step="0.01">

CSS

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


/* Range control */
.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;
}

JavaScript

const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })

const cp = new CircleProgress('.progress', {
	value: 0,
  textFormat: (value) => formatter.format(value),
  animation: 'none',
	max: 100,
})

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