2 713 Скрипты / Loading

Загрузчик как на Facebook

Внешне похожий загрузчик, на ajax загрузчик, используемый на facebook, когда подгружается, что-то тяжелое или ваше интернет соединение не позволяет загрузить страничку мгновенно.

HTML

Простая разметка и для Демо добавлены кнопки остановки и начала анимации:

    <div id="boxbutton">
        <button id="btstart">Старт</button>
        <button id="btstop" disabled="disabled">Стоп</button>
    </div>
    <div class="boxanimated" id="bar1"></div>
    <div class="boxanimated" id="bar2"></div>
    <div class="boxanimated" id="bar3"></div>

CSS

Позиция DIV должны быть абсолютной:

#container {
    padding: 50px;
    margin: 0 auto;
}
.boxanimated {
    height: 150px;
    width: 70px;
    border: 2px solid #000;
    margin-right: 2px;
    background: #333;
    opacity: 0.2;
    filter:alpha(opacity=20);
    position: absolute;
    top: 250px;
}

JS

Подключаем jQuery и вот такой код:

JQuery анимация играет важную роль в данном примере. Когда запускается анимация, то происходит манипуляция с CSS, а именно изменяются свойства: top, left, width и height.

SetInterval и SetTimeout - используются для некоторой задержки перед каждым изменением свойств DIV элемента.

Скачать 285Загрузок 1,49 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи