Documentation

Vue

Source & Credits

Upgrade Guide

Change Log

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,
    });
    }
})