在開(kāi)發(fā) Web 應(yīng)用程序的過(guò)程中，通過(guò)使用戶(hù)等待來(lái)加載內(nèi)容通常是不可避免的。雖然這種等待時(shí)間通常僅僅幾秒鐘，但對(duì)于用戶(hù)來(lái)說(shuō)似乎是一輩子。

為了避免這種情況的發(fā)生，可以使用 CSS 動(dòng)畫(huà)來(lái)顯示“加載中”動(dòng)畫(huà)，并讓用戶(hù)知道進(jìn)度如何。下面是一個(gè)簡(jiǎn)單的 CSS 加載中動(dòng)畫(huà)的案例：

.loading {
width: 40px;
height: 40px;
margin: 20px auto;
position: relative;
animation: rotate 1s linear infinite;
}
.loading .inner {
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
position: absolute;
top: 0;
left: 0;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}

如上所示，我們創(chuàng)建了一個(gè)“l(fā)oading”類(lèi)，并使用 CSS 動(dòng)畫(huà)來(lái)創(chuàng)建了一個(gè)簡(jiǎn)單的加載動(dòng)畫(huà)。該動(dòng)畫(huà)主要是通過(guò)旋轉(zhuǎn)內(nèi)部元素（使用spin動(dòng)畫(huà)）和旋轉(zhuǎn)外部元素（使用rotate動(dòng)畫(huà)）來(lái)實(shí)現(xiàn)的。

可以將此 CSS 代碼添加到您的項(xiàng)目中，以顯示加載中的動(dòng)畫(huà)。您也可以使用適當(dāng)?shù)?HTML 來(lái)實(shí)現(xiàn)此功能。

總之，通過(guò)使用 CSS 動(dòng)畫(huà)，我們可以輕松地創(chuàng)建出漂亮而高效的加載動(dòng)畫(huà)，并讓用戶(hù)在等待時(shí)感到更加輕松愉快。