jQuery loading樣式能夠為網(wǎng)頁增添一些動態(tài)效果和用戶體驗，下面介紹一些具有代表性的loading效果。

//spinner旋轉(zhuǎn)動畫
.spinner {
border: .2em solid rgba(255, 255, 255, .3);
border-top: .2em solid #fff;
border-radius: 50%;
height: 3.6em;
width: 3.6em;
-webkit-animation: spin .6s linear infinite;
animation: spin .6s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}

spinner旋轉(zhuǎn)動畫在使用比較頻繁，其實現(xiàn)方法是通過CSS3的@keyframes、transform等屬性來定義。

//loading動畫
.loading {
width: 36px;
height: 18px;
border: none;
margin: 0;
padding: 0;
border-radius: 6px;
background-color: #f3f3f3;
position: relative;
overflow: hidden;
}
.loading:before {
content: "";
display: block;
position: absolute;
left: -36px;
width: 36px;
height: 18px;
background-color: #2c2c2c;
animation: loadingAnimation 1s infinite linear;
-webkit-animation: loadingAnimation 1s infinite linear;
}
@-webkit-keyframes loadingAnimation {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes loadingAnimation {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}

Loading動畫的實現(xiàn)同樣是基于CSS3的@keyframes、transform等屬性來定義，其原理是通過一個移動的長方形實現(xiàn)動態(tài)效果。

上述兩種loading樣式只是其中的一部分，通過搜索引擎可以找到更加詳細的實現(xiàn)方法，讓你的網(wǎng)頁增加更多的動態(tài)效果和用戶體驗。