<div class="status-bar"></div>

標簽樣式中設置高度和背景顏色，以便我們的狀態欄具有可識別的外觀。我們還可以使用CSS偽類選擇器來設置鼠標懸停狀態下的行為：

.status-bar {
height: 30px;
background-color: #333;
}
.status-bar:hover {
cursor: pointer;
background-color: #444;
}

現在，我們的狀態欄的基本外觀已經完成了。但是，一些常見的狀態欄，如網頁加載狀態，需要一些額外的元素來傳達信息。在這種情況下，我們可以創建一個子元素，并對其應用動畫效果來展示狀態的變化。

<div class="status-bar">
<div class="progress-bar"></div>
</div>
.status-bar .progress-bar {
height: 100%;
width: 0%;
background-color: #25b;
transition: width 0.5s ease-out;
}
.status-bar.loading .progress-bar {
width: 100%;
}

我們可以看到，我們的狀態欄現在具有一個表示進度的子元素，并添加了一些交互動畫。我們還用CSS類“loading”來聯動動畫，并根據需要設置進度條的寬度。 總體來說，CSS狀態欄是一個簡單而有用的UI元素，它可以傳達有用的信息，并改善用戶體驗。通過使用HTML和CSS，我們可以創建自己的狀態欄，并完全掌控其外觀和行為。