原文地址：[http://css-tricks.com/css3-loading-spinner/](http://css-tricks.com/css3-loading-spinner/) 原文作者：**Chris Coyier** **譯者：蔣宇捷** ?為了好玩，我創建了一個小小的CSS3縱向旋轉的載入效果。下面是這個光環在Webkit內核瀏覽器上的效果圖片。  工作原理： - 兩個[圓形](http://css-tricks.com/examples/ShapesOfCSS/)重疊在一起. 其中一個使用[偽元素](http://css-tricks.com/video-screencasts/94-intro-to-pseudo-elements/)創建。 - 偽元素創建的圓形使用負的[z-index](http://css-tricks.com/video-screencasts/40-how-z-index-works/)放置在下面。 - 偽元素創建的圓形的[box-shadow](http://css-tricks.com/snippets/css/css-box-shadow/)（盒陰影）設置為inset（內陰影）。 - 標準的圓形使用標準的[box-shadow](http://css-tricks.com/snippets/css/css-box-shadow/)（盒陰影）。 - 文字“Loading”使用<strong>標簽和[overflow:hidden](http://css-tricks.com/the-css-overflow-property/)。 - <strong>標簽的長度使用[keyframe](http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/)動畫重復的展現。 - 設置line-height（行高）等于height（高度）使文本垂直居中。 - 旋轉器是一個三角形，設置[z-index](http://css-tricks.com/snippets/css/css-triangle/)，使其放置在偽元素創建的圓形上，但是在標準的圓之下。 - 我們將通過改變三角形的-webkit-transform-origin屬性使其從頂端開始旋轉。 - 我們將使用keyframe動畫從0到360度開始重復設置三角形的角度。 ?理想情況下，三角形將是一個偽元素，但不幸的是它現在是一個<span>。因為偽元素目前還不能設置動畫。Firefox 4可以設置偽元素的轉換，但是Firefox 4還不支持keyframe動畫。 ?[點擊查看示例](http://css-tricks.com/examples/Loading/)。