CSS是一種廣泛用于網(wǎng)頁(yè)設(shè)計(jì)的樣式表語(yǔ)言，可以用來(lái)美化頁(yè)面的樣式和布局。而在實(shí)際開(kāi)發(fā)中，我們常常需要做一些加載ui來(lái)提高頁(yè)面的用戶體驗(yàn)。

下面我們來(lái)看一下如何使用CSS來(lái)制作一個(gè)簡(jiǎn)單的加載ui。

.loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.loading::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
border-radius: 50%;
animation: loading 0.6s linear infinite;
vertical-align: middle;
}
@keyframes loading {
0% {
transform: scale(0.2);
opacity: 0;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.2);
opacity: 0;
}
}

通過(guò)以上CSS代碼，我們可以實(shí)現(xiàn)一個(gè)基本的環(huán)形加載ui效果，只需要在HTML頁(yè)面中添加如下代碼即可：

<div class="loading"></div>

需要注意的是，該加載ui相對(duì)位置是相對(duì)于瀏覽器窗口定位的，如果需要相對(duì)于頁(yè)面內(nèi)某一元素定位，可以將父元素的position屬性設(shè)置為relative。

在實(shí)際開(kāi)發(fā)中，我們還可以根據(jù)實(shí)際需求進(jìn)一步優(yōu)化加載ui效果，例如添加動(dòng)畫效果等，讓頁(yè)面更加美觀和流暢。