问题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加载没有图像的纺纱器

回答

相关问题