CircleProgress - text under value

by tikosar

HTML

<script src="https://cdn.jsdelivr.net/gh/tigrr/[email protected]/dist/circle-progress.js"></script>
<div class="progress"></div>
<svg>
  <!-- Gradient (just need to insert in the <svg> tag. The ID must be unique) -->
  <linearGradient id="linear-gradient">
    <stop offset="0%" stop-color="gold"/>
    <stop offset="100%" stop-color="teal"/>
  </linearGradient>
</svg>

CSS

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

.circle-progress-value {
	stroke-width: 6px;
  /* Use SVG gradient for stroke */
	stroke: url("#linear-gradient");
	stroke-linecap: round;
}

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

JavaScript

new CircleProgress('.progress', {
	max: 100,
	value: 90,
  textFormat: 'percent'
});