jquery 进度图

jQuery进度图是一种使用jQuery库来实现的可视化进度表示方式。它通常用于展示任务的完成进度，如文件上传、数据加载或任何需要显示进度的场景。

基础概念

jQuery: 一个快速、小巧且功能丰富的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。
进度图: 一种图形化的表示方式，用于显示任务的完成百分比。

类型

条形进度条: 最常见的形式，通过填充颜色表示进度。
圆形进度环: 以圆形的方式展示进度，视觉上更为直观。
仪表盘式: 类似于汽车仪表盘的指针式进度显示。

应用场景

网站后台管理: 显示数据导入或处理的进度。
在线购物车: 展示订单处理的进度。
文件上传界面: 实时反馈上传文件的进度。

示例代码

以下是一个简单的条形进度条的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Progress Bar</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #progressBar {
            width: 100%;
            background-color: #ddd;
        }
        #progress {
            width: 0%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
        }
    </style>
</head>
<body>

<div id="progressBar">
    <div id="progress">0%</div>
</div>

<script>
$(document).ready(function(){
    var progress = 0;
    var interval = setInterval(function() {
        if (progress >= 100) {
            clearInterval(interval);
        } else {
            progress++;
            $("#progress").css("width", progress + "%").text(progress + "%");
        }
    }, 50);
});
</script>

</body>
</html>