了解如何創建CSS預加載。
如何創建一個Loader
步驟1）添加HTML：
例
<div class="loader"></div>步驟2）添加CSS：
例
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
} 試一試» 例子解釋：
該border屬性指定的邊框大小和裝載機的邊框顏色。 該border-radius財產轉換裝載機成一個圓圈。
那打轉邊框內的藍色東西是用指定的border-top屬性。 您還可以包括border-bottom ， border-left和/或border-right ，如果你想要更多的"spinners" (see example below) 。
裝載機的大小與指定的width和height屬性。
最後，我們添加了animation與2秒的動畫速度，使藍色的東西永遠旋轉。
注意：您還應該包括不支持動畫和轉換屬性瀏覽器-webkit-和-ms-前綴。 點擊例子來看看如何。
添加更多紗廠
例
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
} 試一試» 例
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
} 試一試» 另一個例子
如何放置裝載頁面並顯示中央的一個例子"page content"加載完成時：