CSS報表Loding是指在瀏覽器加載時展現的動態頁面加載欄。它可以提高用戶等待的體驗，并且為用戶提供了一種簡單但有效的方式來知道正在進行的加載進度。

首先，為了創建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效果，為我們的用戶提供更好的用戶體驗。