CSS寫進度條
進度條是一個網站或應用程序中常見的界面元素。它可以用來顯示任何正在進行的進程的進度，如文件上傳、頁面加載等。使用CSS可以輕松地創建一個自定義的進度條，使其與網站或應用程序的UI一致。
/* HTML *//* CSS */
.progress {
width: 100%;
height: 20px;
background-color: #f2f2f2;
}
.progress-bar {
height: 100%;
background-color: #007bff;
width: 0%;
transition: width 0.5s ease;
}以上是HTML和CSS的代碼，其中進度條是一個
元素，具有一個表示進度的子元素
。進度條的樣式由以下CSS規則控制：
- .progress規定大的進度條元素的樣式
- .progress-bar規定小的表示進度的元素的樣式
進度條的背景顏色由.progress的background-color屬性指定，它被設置為一個灰色。表示進度條的小矩形通過.progress-bar的height設定為整個進度條的高度。其寬度通過width屬性設置為0，配合CSS中的transition屬性使得進度條在加載過程中可以平滑地過渡到100%。
通過JavaScript可以改變.progress-bar元素的寬度，以實現不同的進度。例如，在上傳文件或其他長時間操作期間可以利用JavaScript來動態地更新進度條。
