CSS圓形加載

代碼如下：
.loader {
position: relative;
margin: 0 auto;
width: 40px;
height: 40px;
}
.loader:before {
content: '';
display: block;
padding-top: 100%;
}
.loader:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid #ccc;
border-color: #ccc transparent #ccc transparent;
animation: loader 0.8s linear infinite;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

實(shí)現(xiàn)原理

首先，我們創(chuàng)建一個(gè)帶有padding-top為100%的偽元素，目的是為了使元素產(chǎn)生一個(gè)正方形區(qū)域。然后，我們使用絕對(duì)定位將偽元素移動(dòng)到loading元素的頂部和左側(cè)。接下來(lái)，我們使用border-radius屬性將該元素轉(zhuǎn)換為完美的圓形。最后，我們?yōu)樵撛靥砑有D(zhuǎn)動(dòng)畫(huà)，使其看起來(lái)像在加載。

總結(jié)

使用CSS可以輕松實(shí)現(xiàn)簡(jiǎn)單的圓形加載效果，它不僅簡(jiǎn)單易用，而且還改善了用戶體驗(yàn)，使用戶在等待頁(yè)面加載的同時(shí)不會(huì)感到無(wú)聊。同時(shí)，CSS圓形加載也可以完美適用于各種設(shè)備和平臺(tái)。