Circle Progress
Use the required class varient (e.g. progress-secondary, progress-success, progress-warning, progress-danger, progress-dark ) for different background-color.
HTML Code
<div id="circle-progress-01" class="circle-progress-01 circle-progress circle-progress-primary text-center" data-min-value="0" data-max-value="100" data-value="90" data-type="percent">
</div>
Script
const progressBar = document.getElementsByClassName('circle-progress')
Array.from(progressBar, (elem) => {
const minValue = elem.getAttribute('data-min-value')
const maxValue = elem.getAttribute('data-max-value')
const value = elem.getAttribute('data-value')
const type = elem.getAttribute('data-type')
if (elem.getAttribute('id') !== '' && elem.getAttribute('id') !== null) {
new CircleProgress('#'+elem.getAttribute('id'), {
min: minValue,
max: maxValue,
value: value,
textFormat: type,
});
}
})