問題CSS3加載沒有圖像的紡紗器

我沒有太多的CSS經驗。我創建了一個HTML5網絡應用程序。要在頁面中顯示一些加載活動，我使用了此博客中的CSS：CSS3 loading spinners without images。作者展示瞭如何在沒有任何圖像的情況下創建加載屏幕。我使用了精確的CSS3代碼和一些額外的div。但不知何故，在我的頁面中使用時，其中一個條未正確對齊。我得到的進度條顯示在下面的圖片：問題CSS3加載沒有圖像的紡紗器

Spinner

和CSS & HTML是如下：

<div id="mainSpinnerDiv_aims"> 
<div id="spinnerDiv_aims"> 
    <div class="bar1_aims"></div> 
    <div class="bar2_aims"></div> 
    <div class="bar3_aims"></div> 
    <div class="bar4_aims"></div> 
    <div class="bar5_aims"></div> 
    <div class="bar6_aims"></div> 
    <div class="bar7_aims"></div> 
    <div class="bar8_aims"></div> 
</div> 
<p id="waitText_aims"> please wait... </p>  
</div> 


.bar1_aims { 
    -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12; 
} 
.bar2_aims { 
    -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25; 
} 
.bar3_aims { 
    -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37; 
} 
.bar4_aims { 
    -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50; 
} 
.bar5_aims { 
    -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62; 
} 
.bar6_aims { 
    -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75; 
} 
.bar7_aims { 
    -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87; 
} 
.bar8_aims { 
    -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1; 
} 


#mainSpinnerDiv_aims{ 
margin-top:70px; 
width: 100%; 
text-align:center; 
} 

#spinnerDiv_aims{ 
    position:relative; 
    width:100px; 
    height:100px; 
    display: inline-block; 
    -webkit-animation-name: rotateSpinner; 
    -webkit-animation-duration:1.3s; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function:linear; 
} 

#waitText_aims { 
font-weight:600; 
} 

#spinnerDiv_aims div{ 
width:10px; 
height:30px; 
background:#a00; 
position:absolute; 
top:35px; 
left:45px; 
} 

@-webkit-keyframes rotateSpinner { 
    from {-webkit-transform:scale(0.25) rotate(0deg);} 
    to {-webkit-transform:scale(0.25) rotate(360deg);} 
}

注意，「BAR1」是不正確的上述對準一個數字。

編輯：

謝謝大家對快速反應。最後我想出了問題。事實證明，我在.bar1_aims {}風格之前有一些評論。它沒有正確評論。這就是爲什麼只有bar1搞砸了。現在已經解決了。

來源

2011-08-15 indusBull

什麼瀏覽器是這裏順便說一句？ –

@Joseph我的不好。我刪除了 ';從郵政。它也爲我工作。但不知何故，它已停止工作，我得到了上述的微調。 – indusBull

這是鉻。它在jsFiddle中工作。但是，當我的網頁使用它不起作用。 – indusBull

~~我認爲可能導致你的問題是標記。它到處都有奇怪的 ';。~~ 實際的代碼似乎對我很好：http://jsfiddle.net/87Rbs/

來源

2011-08-15 16:10:51

對我來說工作得很好。你使用的是Chrome還是Safari？也許@indusBull使用任何我們不是... –

@josh他使用鉻。看到他對主要問題 –

的評論我必須變老... :) –

我明白在圖像上使用CSS來減少HTTP請求並提高性能，但用一系列不斷運行javascript的div替換一個小的動畫.gif文件功能動畫似乎毫無意義。

看起來很諷刺，因爲它只會在等待其他東西加載時纔會使用。

所以我的回答是就Ajax Load生成.gif圖像，並替換爲以下代碼：

<img src="/ajax-loader.gif" alt="Loading..." />

來源

2011-08-15 16:13:52 Curt

更不用說它在FF，Opera或IE中不起作用（至少<9）：S –

瘋狂。很高興展示CSS3的強大功能，但我無法想象當我通過動畫圖像（它始終是跨瀏覽器兼容的）使用它時的情況 – Curt

不幸的是，這是非常真實的......並且只是想多久它已經採取MS拉動IE6的支持是相當令人沮喪。在大多數家庭計算機支持此功能之前，我們需要等待很長時間。 –

問題CSS3加載沒有圖像的紡紗器

回答

相關問題