加載中CSS樣式

在Web前端開發中，我們經常會遇到加載過程需要顯示一個“加載中”的效果，讓用戶知道頁面正在加載。這個效果通常是通過添加一個div層，然后在div層中添加相應的CSS樣式實現的。

下面是一個可以用來實現“加載中”效果的CSS樣式示例：

.loading{
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,0.7);
z-index: 99999;
}
.loading span{
width: 10px;
height: 10px;
margin: 3px;
border-radius: 100%;
background-color: #fff;
animation: loading 1s ease-in-out infinite;
}
@keyframes loading{
0%{
transform: scale(0);
opacity: 0;
}
50%{
opacity: .5;
}
100%{
transform: scale(1);
opacity: 1;
}
}

在以上代碼中，首先我們定義了一個占用全屏的div層，然后設置其背景色及其樣式屬性，我們這里設為半透明黑色。接著，我們將里面的內容設置為一個span元素，這個元素是我們用來實現旋轉、閃爍等效果的要素。最后，我們對這個span元素定義了一個動畫效果，涵蓋了這個元素的所有屬性。

使用以上代碼，我們可以輕松實現一個簡單的“加載中”效果。

在HTML中使用以上樣式，代碼如下：

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

以上代碼將會在頁面中顯示出一個閃爍的圓形元素，表示數據正在加載中，給用戶一種良好的視覺體驗。