README

该插件使用Bootstrap和jQuery以圆形的形式显示进程。

要求

• Bootstrap >= v4.0.0 (与Bootstrap 5.x兼容)
• jQuery >= 1.9

安装

手动

从dist文件夹中下载压缩文件jquery-bs-circle-progress.min.js。将其上传到您的项目，并在jQuery脚本之后但在标签之前包含它。

<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>

手动

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

用法

html

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

javascript

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

就是这样！

插件选项

示例

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

插件方法

示例

 $('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)