css 报表loding |css dispaly table

首先，为了创建CSS报表Loding，大家需要使用CSS编写一些关键代码。下面的代码使用CSS定义了一个简单的报表Loding：

/*定义报表Loding的关键代码 */
.loading {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
position: fixed;
top: 0;
left: 0;
}
.loading .loading-inner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.loading .loading-inner p {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.loading .loading-inner .loading-bar {
width: 100%;
height: 10px;
background-color: #999;
border-radius: 5px;
overflow: hidden;
}
.loading .loading-inner .loading-bar .loading-progress {
width: 0%;
height: 100%;
background-color: #0066cc;
}

在这些CSS代码中，大家可以看到一个名为.loading的CSS class，该class定义了报表Loding的样式和布局。它还包含一个名为.loading-inner的div，其中包含等待消息和Loading条。这个div内部的CSS定义了Loading条的样式和动态效果。

完成CSS部分后，大家需要在HTML代码中单独使用一个div元素来表示Loding。在这个div内部，大家可以包含任何需要等待加载的内容。以下是一个演示HTML代码：

正在加载报表，请稍等...

最后，在JavaScript中大家需要编写一些代码来监听页面加载进度，然后动态更新loading条的进度。以下是一个基本的JavaScript代码实现：

// JavaScript代码
window.onload = function() {
var progressBar = document.querySelector('.loading .loading-inner .loading-bar .loading-progress');
var percent = 0;
var intervalId = setInterval(function() {
percent += 5;
progressBar.style.width = percent + '%';
if (percent >= 100) {
clearInterval(intervalId);
}
}, 50);
};

在这个JavaScript代码中，大家首先获取了loading条内部的进度元素。然后，大家每50毫秒增加进度值5%，动态更新进度条，直到进度达到100%为止。

通过使用CSS和JavaScript技术，大家可以轻松地创造一个令人愉悦的、动态的报表Loding效果，为大家的用户提供更好的用户体验。