圓形正在加載是一個(gè)常見(jiàn)的動(dòng)態(tài)效果，它可以讓用戶在等待頁(yè)面加載時(shí)感受到一種活力和互動(dòng)性。我們可以使用CSS來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圓形正在加載效果。

以下是我們所需的CSS代碼。我們使用了動(dòng)畫(huà)效果，讓圓形不斷地旋轉(zhuǎn)，形成一個(gè)不斷變化的加載效果。pre標(biāo)簽中的代碼就是我們的CSS樣式代碼。

.loader {
border-top: 5px solid #ddd;
border-right: 5px solid #ddd;
border-bottom: 5px solid #ddd;
border-left: 5px solid #000;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

接下來(lái)，我們需要在HTML中使用這個(gè)CSS類(lèi)來(lái)創(chuàng)建出一個(gè)樣式符合要求的圓形正在加載效果。以下是HTML的代碼，我們?cè)谝粋€(gè)div元素中嵌套了一個(gè)span元素，來(lái)展示圓形加載效果。

<div class="loader"><span></span></div>

運(yùn)用以上代碼，我們最終可以得到一個(gè)元素，它實(shí)現(xiàn)了簡(jiǎn)單的圓形正在加載效果，如下所示。