CSS 中的 loading 是指頁面或元素仍在加載或正在處理中的過渡狀態(tài)。在實現(xiàn)這種過渡狀態(tài)時，我們可以使用 CSS 動畫，讓用戶知道頁面或元素在處理中，避免用戶感到頁面卡頓或等待時間過長。

在 CSS 中，我們可以使用眾多的屬性和值來實現(xiàn) loading 效果。其中，transform、opacity、transition 和 animation 是最常用的屬性和值。

/* transform 屬性實現(xiàn)旋轉效果 */
.loading {
border: 0.2rem solid #d7d7d7;
border-top-color: #1abc9c;
border-radius: 50%;
height: 3rem;
width: 3rem;
-webkit-animation: spin 1s ease-in-out infinite;
animation: spin 1s ease-in-out infinite;
display: inline-block;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

上面的代碼使用 transform 屬性實現(xiàn)了一個旋轉的 loading 效果，并且使用了 animation 屬性定義了動畫名稱、動畫時長、過渡效果等。同時，我們也可以使用 transition 屬性來實現(xiàn)一個平滑漸變的 loading 效果：

/* transition 屬性實現(xiàn)平滑漸變效果 */
.loading {
border: 0.2rem solid #d7d7d7;
height: 3rem;
width: 3rem;
border-radius: 50%;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.loading:before {
content: "";
display: block;
padding-top: 100%;
}
.loading.loading-show {
opacity: 1;
}

以上代碼使用了 transition 屬性實現(xiàn)了一個平滑漸變的 loading 效果。同時，在 .loading 類中，我們還使用了 before 偽元素添加了一個占位符，避免 loading 出現(xiàn)抖動的現(xiàn)象。在 loading 顯示時，我們將 .loading-show 類應用到對應的元素上。