效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>进度条示例</title>
<style>
/* 进度条样式 */
#progress-bar-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 400px;
height: 5px;
background-color: #ccc;
display: none;
}
#progress-bar {
height: 100%;
width: 0;
background-color: #4caf50;
position: relative;
}
#progress-text {
position: absolute;
top: -20px;
right: 0;
font-size: 12px;
color: #000;
}
/* 全局样式,用于禁用整个页面 */
.disabled {
pointer-events: none;
}
</style>
</head>
<body>
<!-- 进度条容器 -->
<div id="progress-bar-container">
<div id="progress-bar">
<div id="progress-text">0%</div>
</div>
</div>
<!-- 你的页面内容 -->
<div id="content">
<button id="triggerButton">触发异步操作</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 获取进度条容器和内容元素
const progressBarContainer = $('#progress-bar-container');
const progressBar = $('#progress-bar');
const progressText = $('#progress-text');
const contentElement = $('#content');
// 显示进度条和全局遮罩层
function showProgressBar() {
progressBarContainer.show();
contentElement.addClass('disabled');
}
// 更新进度条和百分比文本
function updateProgressBar(percentage) {
progressBar.width(percentage + '%');
progressText.text(percentage + '%');
}
// 隐藏进度条和全局遮罩层
function hideProgressBar() {
progressBarContainer.hide();
progressBar.width(0);
progressText.text('0%');
contentElement.removeClass('disabled');
}
// 模拟异步操作
function simulateAsyncOperation() {
showProgressBar();
let progress = 0;
function updateProgress() {
// 模拟异步操作的进度
progress += 10;
updateProgressBar(progress);
if (progress < 100) {
// 如果进度未达到100%,则继续更新
setTimeout(updateProgress, 500);
} else {
// 进度达到100%后隐藏进度条和全局遮罩层
hideProgressBar();
alert("异步操作完成,刷新页面!");
}
}
// 开始定期更新进度
updateProgress();
}
// 模拟异步操作
/* function simulateAsyncOperation() {
showProgressBar();
// 发送开始处理的请求
$.ajax({
url: "你的接口",
type: "post",
dataType: "json",
data: { 参数 },
timeout: 0,
success: function (res) {
// 处理完成
updateProgressBar(100); // 确保进度条到达100%
hideProgressBar();
layer.msg(res.data, { time: 500 }, function () {
window.parent.location.reload();
});
},
error: function (xhr, status, error) {
hideProgressBar();
console.error("Error:", status, error);
}
});
// 启动长轮询以获取进度更新
(function pollForProgress() {
$.ajax({
url: "/path/to/progress/update", // 获取进度的接口
type: "get",
success: function(data) {
updateProgressBar(data.progress); // 更新进度条
if (data.progress < 100) {
setTimeout(pollForProgress, 1000); // 递归调用
}
},
error: function() {
setTimeout(pollForProgress, 1000); // 出错时重试
}
});
})();
} */
// 例子:在按钮点击时触发异步操作
$('#triggerButton').on('click', simulateAsyncOperation);
});
</script>
</body>
</html>
效果图