JSFiddle - React, Tailwind, and code Playground

by tikosar

HTML

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

CSS

.progress-container {
  height: 150px;
  overflow: hidden;
}

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

.circle-progress-circle {
  stroke-width: 6px;
}

.circle-progress-value {
	stroke-width: 6px;
	stroke: #0cc2f4;
}

.circle-progress-text {
  transform: translateY(-7px);
  font-family: sans-serif;
}

JavaScript

const max = 100
const fakeMax = max * 2

new CircleProgress('.progress', {
	max: fakeMax,
	value: 90,
  textFormat: (value) => `${Math.round(value / max * 100)}%`,
  startAngle: 270,
});