Circles轻量级Js圆形进度条插件

介绍：
circles是一款基于HTML5 SVG的轻量级JavaScript圆形进度条插件。该圆形进度条具有响应式，可动画等特点，并且可以制作出圆形进度条进入视口才开始动画的效果。
只有一个JS文件

使用方法：
1.导入circles.js或circles.min.js文件
2.在HTML中创建一个占位符div：

<div id="circles-1"></div>

3.利用js调用

Circles.create({
    id: 'circles-1',
    radius: 45,
    value: allcount,
    maxValue: allcount,
    width: 7,
    text: allcount,
    colors: ['#f1f1f1', '#FF9E27'],
    duration: 400,
    wrpClass: 'circles-wrp',
    textClass: 'circles-text',
    styleWrapper: true,
    styleText: true
});            

4.通过隐藏input来获取从后端传来的数据并且利用Circles绘图：
HTML：

<input hidden="hidden" id="allcountid" th:value="${allcount}"/>
//部分代码省略   
 <div class="px-2 pb-2 pb-md-0 text-center">
                                        <div id="circles-1"></div>
                                        <h6 class="fw-bold mt-3 mb-0">事件总数</h6>
                                    </div>   

JS代码：

   var allcount = $("input#allcountid").val();
 
Circles.create({
    id: 'circles-1',
    radius: 45,
    value: allcount,
    maxValue: allcount,
    width: 7,
    text: allcount,
    colors: ['#f1f1f1', '#FF9E27'],
    duration: 400,
    wrpClass: 'circles-wrp',
    textClass: 'circles-text',
    styleWrapper: true,
    styleText: true
});     

JS链接
链接