Проблема с загрузкой спиннеров CSS3 без изображения

Question

У меня не так уж много опыта с CSS. Я создал веб-приложение HTML5. Чтобы показать некоторую загрузочную активность на странице, я использовал CSS из этого блога: CSS3 загрузки бланки без изображений . Автор показал, как можно создать загрузочный экран без каких-либо изображений. Я использовал точный код CSS3 с некоторыми дополнительными элементами. Но почему-то одна из полос не выровнена должным образом при использовании внутри моей страницы. Я получаю индикатор выполнения, как показано на рисунке ниже:

И 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" - это тот, который не выровнен должным образом на рисунке выше.

Edit:

Спасибо всем за быстрый ответ. Наконец-то я разобрался с проблемой. Оказывается, у меня был какой-то комментарий прямо перед стилем .bar1_aims {}. Это не было правильно прокомментировано. Вот почему только бар1 был испорчен. Теперь решено.

Answer 1

Я понимаю использование CSS над изображениями для уменьшения HTTP-запросов и повышения производительности, но замена небольшого анимированного .gif-файла на серию div, которые постоянно запускают функции javascript для анимации, кажется бессмысленной.

Этокажется ироничным, учитывая, что он будет использоваться только в ожидании загрузки чего-то другого.

---

Поэтому мой ответ будет состоять в том, чтобы сгенерировать изображение .gif на Ajax Load и заменить ваш код наследующее:

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

Answer 2

Я думаю, что причиной вашей проблемы является разметка.У него странные '; с повсюду. Мне кажется, что реальный код работает нормально: http://jsfiddle.net/87Rbs/