jquery 圆形百分比插件

基础概念

jQuery 圆形百分比插件是一种基于 jQuery 的 JavaScript 插件，用于在网页上显示圆形的进度条或百分比指示器。这种插件通常通过 HTML、CSS 和 JavaScript 结合使用，利用 jQuery 的便利性来简化 DOM 操作和事件处理。

类型

静态圆形百分比：显示固定的百分比值，不随时间变化。
动态圆形进度条：可以实时更新进度，常用于文件上传、下载进度显示等场景。

应用场景

仪表盘显示关键性能指标（KPI）。
进度跟踪，如任务完成度、项目进度等。
数据可视化，如统计数据展示。

示例代码

以下是一个简单的 jQuery 圆形百分比插件使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 圆形百分比插件示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-circle-progress@1.2.2/dist/jquery.circle-progress.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-circle-progress@1.2.2/dist/jquery.circle-progress.css">
    <style>
        .circle {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="circle">
        <div class="percent">0%</div>
    </div>

    <script>
        $(document).ready(function() {
            $('.circle').circleProgress({
                value: 0.75, // 设置百分比值
                size: 200, // 设置圆形大小
                fill: { gradient: ['#FF5733', '#FFC300'] } // 设置渐变颜色
            }).on('circle-animation-progress', function(event, progress, stepValue) {
                $(this).find('.percent').text(Math.round(stepValue * 100) + '%');
            });
        });
    </script>
</body>
</html>