CSS進度對話框是 web 設計中常用的一個工具，能夠方便地為用戶呈現加載進度。下面來介紹如何使用 CSS 實現一個簡單的進度對話框。

.progress-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
padding: 20px;
}
.progress-bar {
height: 10px;
background-color: #f1f1f1;
margin-bottom: 20px;
border-radius: 5px;
overflow: hidden;
}
.progress {
height: 100%;
width: 0;
background-color: #69c;
animation: progress 2s linear infinite;
border-radius: 5px;
}
@keyframes progress {
0% {
width: 0;
}
100% {
width: 100%;
}
}

首先，來布局對話框。將對話框的 position 設置為 fixed，再通過 top 和 left 屬性將其置于頁面中心。

對話框的背景顏色、邊框圓角和陰影效果可以通過 CSS 樣式來設置。為了讓對話框內容居中展示，還需要設置 padding 屬性。

接著，創建進度條。將進度條的高度設為 10px，并設置一個灰色背景色。為了讓進度條和對話框之間留出一些間距，可以設置 margin-bottom 屬性。

通過 .progress 類設置進度條的顏色，以及通過 animation 屬性實現動畫效果。進度條動畫的實現是通過定義名為 progress 的 keyframes，從 0% 到 100% 逐漸增加進度條的寬度實現的。

最后，在 HTML 代碼中插入對應的 div 元素即可創建一個簡單的進度對話框。

<div class="progress-dialog">
<div class="progress-bar">
<div class="progress"></div>
</div>
</div>