Загрузчик как на 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 и вот такой код:

$(document).ready(function() {
    function startAnimate() {
        $('#bar1').animate({
            opacity: 1,
            height: "300px",
            top: "-=75",
            left: "-=15",
            width: "100px"
            }, 300, function() {
            $('#bar1').animate({
                opacity: 0.2,
                height: "150px",
                top: "+=75",
                width: "70px",
                left: "+=15"
                }, 300, function() {
            });
        });
        setTimeout(function() {
            $('#bar2').animate({
                opacity: 0.5,
                height: "250px",
                top: "-=50",
                width: "80px",
                left: "-=5"
                }, 300, function() {
                $('#bar2').animate({
                    opacity: 0.2,
                    height: "150px",
                    top: "+=50",
                    width: "70px",
                    left: "+=5"
                    }, 300, function() {
                });
            })
        }, 300);
        setTimeout(function() {
            $('#bar3').animate({
                opacity: 1,
                height: "300px",
                top: "-=75",
                left: "-=15",
                width: "100px"
                }, 300, function() {
                $('#bar3').animate({
                    opacity: 0.2,
                    height: "150px",
                    top: "+=75",
                    width: "70px",
                    left: "+=15"
                    }, 300, function() {
                });
                }
            )
        }, 600);
    }
    var animated = setInterval(startAnimate, 3000);
    clearInterval(animated);
    $("#btstart").click(function() {
        animated = setInterval(startAnimate, 1400);
        $(this).attr("disabled", "disabled");
        $("#btstop").removeAttr("disabled");
    });
    $("#btstop").click(function() {
        clearInterval(animated);
        $(this).attr("disabled", "disabled");
        $("#btstart").removeAttr("disabled");
    });
    // problem in FF when refresh in button disabled condition
    $("#btstart").removeAttr("disabled");
    $("#btstop").attr("disabled", "disabled");
    // make sure the loading bar always in the center
    function windowResize() {
        var left_pos = ($(window).width() / 2) - 125;
        $("#bar1").css("left", left_pos);
        $("#bar2").css("left", left_pos + 100);
        $("#bar3").css("left", left_pos + 200);
    }
    windowResize();
    $(window).resize(function() {
        windowResize();
    });
});

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

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