/jquery-bs-circle-progress

The plugin displays a process in the form of a circle using Bootstrap and jQuery.

jquery-bs-circle-progress

The plugin displays a process in the form of a circle using Bootstrap and jQuery.

Requirements

  • Bootstrap >= v4.0.0 (Works with Bootstrap 5.x)
  • jQuery >= 1.9

Installing

Manual

Download the compressed file jquery-bs-circle-progress.min.js from the dist folder. Upload it to your project and include it before the tag but after the jQuery script.

<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="path/to/jquery-bs-circle-progress.min.js"></script>
<script>
    // custom scripts
</script>
</body>

Manual

composer require webcito/jquery-bs-circle-progress:dev-main

Usage

html

<div id="my_first_progress"></div>

javascript

 $('#my_first_progress').circleProgress();

That's it!

Plugin options

prop type default description
size number 200 The size of the circle
value number 0 The predefined value of progress
color string 'primary' The color of the progress. It can be a bootstrap class ('primary', 'secondary', etc.) or a CSS property (rgb(20,20,20)).
background string 'transparent' The color of the background. It can be a bootstrap class ('primary', 'secondary', etc.) or a CSS property (rgb(20,20,20)).
progressWidth number null The thickness of the progress bar. If no value is specified, the thickness is calculated automatically using the circle.

example

 $('selector').circleProgress({
    size: 350,
    value: 12,
    color: '#506886'
});

Plugin methods

method params description
val number Changes the value of progress
updateOptions object Rebuilds the plugin using the new options.

example

 $('selector').circleProgress({
    size: 350,
    value: 12,
    color: '#506886'
});

let seconds = 0;
let testInterval = null;
testInterval = setInterval(function () {
    if (seconds === 100) {
        clearInterval(testInterval)
    }
    let color;
    switch (true) {
        case seconds < 20:
            color = 'danger';
            break;
        case seconds < 40:
            color = 'warning';
            break;
        case seconds < 60:
            color = 'info';
            break;
        case seconds < 80:
            color = 'primary';
            break;
        default:
            color = 'success';
            break;
    }
    $('selector').circleProgress('updateOptions', {
        value: seconds,
        color: color
    });
    seconds++;
}, 100)