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