在網站開發中，有些頁面會需要加載較多的CSS文件，這時候就可能會出現頁面卡頓的情況。為了優化用戶體驗，我們可以使用CSS加載中模態框來解決這個問題。

模態框是一種彈出式的對話框，可以在不離開當前頁面的情況下與用戶進行交互。在CSS加載中模態框中，我們需要在頁面中定義一個半透明的遮蓋層，然后在遮蓋層中添加一個提示用戶正在加載中的信息。最后，在CSS文件加載完畢之后，我們需要將遮蓋層和加載信息隱藏掉。

// CSS代碼示例
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.loading-text {
color: #fff;
font-size: 24px;
font-weight: bold;
}
// JavaScript代碼示例
window.addEventListener('load', function() {
const overlay = document.querySelector('.loading-overlay');
overlay.style.display = 'none';
});

以上是一個簡單的CSS加載中模態框的代碼示例。在HTML文件中，我們需要添加一個遮蓋層和一個加載提示信息：

<div class="loading-overlay">
<p class="loading-text">正在加載，請稍候...</p>
</div>

當CSS文件加載完成后，我們需要通過JavaScript代碼把遮蓋層和提示信息隱藏：

overlay.style.display = 'none';

這樣，當用戶打開頁面時，就會看到加載中的提示信息，等到CSS文件加載完成后，遮蓋層和提示信息就會自動隱藏掉。

通過使用CSS加載中模態框，我們可以顯著提高用戶體驗，避免用戶出現等待過久的情況，提高網站的流暢度和響應速度。