介绍：
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链接
链接