webcito/jquery-bs-circle-progress

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

dev-main 2026-05-28 10:13 UTC

Requires

• components/jquery: >=1.9

Requires (Dev)

• twbs/bootstrap: >=v4.0.0

proprietary

• thomas

README

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.
animated	bool	true	Enables animation when the progress is rendered or updated. Set to false to disable transitions.

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)