jquery ajax加载页面进度条,在单页网站中使用jquery ajax加载页面时显示进度条
时间: 2023-09-22 10:06:43 浏览: 51
要在单页网站中使用 jQuery Ajax 加载页面时显示进度条,可以按照以下步骤操作:
1. 在 HTML 中添加一个进度条元素,如下所示:
```html
<div id="progress-bar">
<div class="bar"></div>
</div>
```
2. 在 CSS 中定义进度条样式,如下所示:
```css
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #ccc;
z-index: 9999;
}
#progress-bar .bar {
height: 100%;
background-color: #007bff;
width: 0;
transition: width .2s ease-in-out;
}
```
3. 在 JavaScript 中使用 jQuery 的 Ajax 事件来显示和隐藏进度条,如下所示:
```javascript
$(document).ajaxStart(function() {
$('#progress-bar .bar').css('width', '0');
});
$(document).ajaxSend(function() {
$('#progress-bar .bar').animate({width: '30%'}, 300);
});
$(document).ajaxComplete(function() {
$('#progress-bar .bar').animate({width: '100%'}, 300, function() {
$('#progress-bar').fadeOut(400);
});
});
```
这段代码会在 Ajax 请求开始时显示进度条,请求发送时将进度条宽度增加到 30%,请求完成时将进度条宽度增加到 100%,然后隐藏进度条。