CSS3的loading樣式是一種非常常見的網頁設計元素，可以在網頁中增加一些動態效果，讓用戶在等待頁面加載時有所不同的體驗。下面介紹一些CSS3中常見的loading樣式。

.loading1{
border: 10px solid #f3f3f3; 
border-top: 10px solid #3498db; 
border-radius: 50%; 
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
.loading2 {
border: 4px solid #f3f3f3; 
border-top: 4px solid #3498db; 
border-radius: 50%; 
width: 30px; 
height: 30px;
animation: spin 1s linear infinite;
}
.loading3 {
border: 4px solid #f3f3f3; 
border-top: 4px solid #3498db; 
border-radius: 50%; 
width: 20px; 
height: 20px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

以上是三種常見的loading樣式的CSS代碼，可以將其應用于HTML元素中。其中，loading樣式1是一個圓形的旋轉動畫，loading樣式2和3是一個圓形邊框的旋轉動畫。

在HTML中，可以使用如下代碼添加loading動畫：

<div class="loading1"></div>
<div class="loading2"></div>
<div class="loading3"></div>

以上代碼會在頁面中增加三個div元素，每個元素都有不同的loading動畫樣式。當頁面加載時間較長時，這些loading樣式能夠有效地提升用戶體驗。