另一个圆形进度条插件,用于在响应式、可自定义的动画百分比/进度图中显示任何数值:圆形、环形图、饼图等。
1.在文档中加载Circle Progress插件的脚本。要将Circle Progress用作jQuery插件,请确保加载jquery.circle-progress.min.js查询
在最新的jQuery JavaScript库之后。
<!-- Vanilla JavaScript --> <script src="dist/circle-progress.min.js"></script> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="dist/jquery.circle-progress.min.js"></script>
2.创建一个空容器来容纳百分比/进度圆圈。
<div class="progress"></div>
3.初始化插件并指定当前/最大值,如下所示:
// Vanilla JavaScript new CircleProgress('.progress', { max: 100, value: 50 }); // jQuery $('.progress').circleProgress({ max: 100, value: 50 });
4.使用以下CSS类自定义百分比/进度圆的样式。
.circle-progress-svg { /* width: 200px; height: auto; ... */ } .circle-progress-circle { /* stroke-width: 6px; stroke: hsl(39, 100%, 85%); ... */ } .circle-progress-value { /* stroke-width: 6px; stroke: hsl(39, 100%, 50%); ... */ } .circle-progress-text { /* fill: hsl(39, 100%, 50%); ... */ } .circle-progress-text-value { /* fill: red; ... */ } .circle-progress-text-max { /* fill: red; ... */ }
5.设置值的文本表示形式:
new CircleProgress('.progress', { textFormat: 'horizontal' });
6.自定义填充动画。
new CircleProgress('.progress', { // linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, or none animation: 'easeInOutCubic', // duration in milliseconds animationDuration: 600 });
7.以度为单位设置起始角度。默认值:0。
new CircleProgress('.progress', { startAngle: 45 });
8.更多具有默认值的配置选项。
new CircleProgress('.progress', { // min value min: 0, // false = anti-clockwise clockwise: true, // whether the value should be constrained between min and max constrain: true, // indeterminate text indeterminateText, '?' });
版本0.2.4(2022-05-16)
版本0.2.3(2022-03-13)
版本0.2.2(2022-01-16)
版本0.2.0(2020-08-23)
版本0.1.2(2020-05-02)
版本0.1.1(2020-04-27)
版本0.1.0(2019-10-05)