CSS寫loading效果對于網站和應用程序至關重要。當網站或應用程序需要從服務器加載數據時，loading動畫會有效地向用戶傳達信息，讓他們知道系統正在忙碌，但稍后會呈現完整的內容。

CSS提供了許多不同的loading動畫，它們可以在網頁加載過程中顯示出來。下面我們將向您介紹幾種不同的loading樣式。

.loading {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.loading div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #0099CC;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loading div:nth-child(1) {
left: 8px;
animation: loading1 0.6s infinite;
}
.loading div:nth-child(2) {
left: 8px;
animation: loading2 0.6s infinite;
}
.loading div:nth-child(3) {
left: 32px;
animation: loading2 0.6s infinite;
}
.loading div:nth-child(4) {
left: 56px;
animation: loading3 0.6s infinite;
}
@keyframes loading1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes loading3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes loading2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}

這個CSS樣式的loading動畫實現是用四個小圓球，它們上下移動和左右移動來創建旋轉加載效果。

另一種loading樣式是環形加載動畫，這是一個比較常見的加載動畫效果：

.loading-ring {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
}
.loading-ring div {
box-sizing: border-box;
display: block;
position: absolute;
border-width: 4px;
border-style: solid;
border-color: #0099CC transparent transparent transparent;
width: 24px;
height: 24px;
border-radius: 50%;
animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-top-color: #0099CC;
}
.loading-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.loading-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.loading-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes loading-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

這個CSS樣式的loading動畫是一個環形的加載動畫，它主要是用CSS旋轉動畫來實現的。您可以通過在CSS樣式中制作loading動畫，讓您的網站更加生動有趣。