隨著Web2.0的高速發展, ajax在網頁設計中變得舉足輕重。而在我們設計ajax時, 常常需要為載入間隔加入載入中的訊息, 以往我們多半會用gif圖示或直接幾個文字交代載入中的訊息, 而現在, 你可有一個新的選擇。

利用 CSS3 的 animation 和 transform, 你可以很簡單地使用純 CSS 產生一個 loading 的圖示, 當然這只是一堆元素組合而成的一個動畫, 並不是一張真正的圖片, 但比起使用gif圖示就多了幾分時尚, 效能也比使用圖示為高, 而且方便易用, 隨時可依喜好更改顏色形狀:

以下是上述例子的代碼, 更多例子可在 cssload.net 中找到

#floatingCirclesG{
position:relative;
width:128px;
height:128px;
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-ms-transform:scale(0.6);
}

.f_circleG{
position:absolute;
background-color:#ffffff;
height:23px;
width:23px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
-webkit-animation-name:f_fadeG;
-webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:f_fadeG;
-moz-animation-duration:1.04s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-o-animation-name:f_fadeG;
-o-animation-duration:1.04s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-ms-animation-name:f_fadeG;
-ms-animation-duration:1.04s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
}

#frotateG_01{
left:0;
top:52px;
-webkit-animation-delay:0.39s;
-moz-animation-delay:0.39s;
-o-animation-delay:0.39s;
-ms-animation-delay:0.39s}

#frotateG_02{
left:15px;
top:15px;
-webkit-animation-delay:0.52s;
-moz-animation-delay:0.52s;
-o-animation-delay:0.52s;
-ms-animation-delay:0.52s}

#frotateG_03{
left:52px;
top:0;
-webkit-animation-delay:0.65s;
-moz-animation-delay:0.65s;
-o-animation-delay:0.65s;
-ms-animation-delay:0.65s;
}

#frotateG_04{
right:15px;
top:15px;
-webkit-animation-delay:0.78s;
-moz-animation-delay:0.78s;
-o-animation-delay:0.78s;
-ms-animation-delay:0.78s;
}

#frotateG_05{
right:0;
top:52px;
-webkit-animation-delay:0.9099999999999999s;
-moz-animation-delay:0.9099999999999999s;
-o-animation-delay:0.9099999999999999s;
-ms-animation-delay:0.9099999999999999s;
}

#frotateG_06{
right:15px;
bottom:15px;
-webkit-animation-delay:1.04s;
-moz-animation-delay:1.04s;
-o-animation-delay:1.04s;
-ms-animation-delay:1.04s;
}

#frotateG_07{
left:52px;
bottom:0;
-webkit-animation-delay:1.1700000000000002s;
-moz-animation-delay:1.1700000000000002s}

#frotateG_08{
left:15px;
bottom:15px;
-webkit-animation-delay:1.3s;
-moz-animation-delay:1.3s;
-o-animation-delay:1.1700000000000002s;
-ms-animation-delay:1.1700000000000002s;
}

#frotateG_08{
left:15px;
bottom:15px;
-webkit-animation-delay:1.3s;
-moz-animation-delay:1.3s;
-o-animation-delay:1.3s;
-ms-animation-delay:1.3s;
}

@-webkit-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#ffffff}

}

@-moz-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#ffffff}

}

@-o-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#ffffff}

}

@-ms-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#ffffff}
}

	<div id="floatingCirclesG">

	    <div class="f_circleG" id="frotateG_02">

	         </div>

	    <div class="f_circleG" id="frotateG_03">

	         </div>

	    <div class="f_circleG" id="frotateG_04">

	         </div>

	    <div class="f_circleG" id="frotateG_05">

	         </div>

	    <div class="f_circleG" id="frotateG_06">

	         </div>

	    <div class="f_circleG" id="frotateG_07">

	         </div>

	    <div class="f_circleG" id="frotateG_08">

	         </div>

	</div>