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-light"
data-min-value="0" data-max-value="100" data-value="62" 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,
        });
        }
    })
Previous Next