Facebook Style Loading Bar Using CSS and JQuery

Have you even paying attention on facebook ajax loading bar, think it’s simple but really cool, if you using high speed internet connection sure this image won’t show, but I always see it when I share a link on my personal facebook status. If you want to get the the image you can use this ajaxload image generator server, pick the facebook style on the combo box.

In this post I try to create it only with html, css, and jquery no image used in this example, using javascript setInterval and jquery animate this loading style can be done.

View Demo | Download Source

The HTML

I’m using 3 div element to creating this loading bar, when the start button clicked, all of these element will be manipulated by jquery animate function.

<div id="boxbutton">
    <button id="btstart">Start</button>
    <button id="btstop" disabled="disabled">Stop</button>
</div>
<div class="boxanimated" id="bar1"></div>
<div class="boxanimated" id="bar2"></div>
<div class="boxanimated" id="bar3"></div>

The JQuery Code

The jquery animate function have an important role in this example, when the animate started the div style being manipulated too, this example manipulating the CSS property such as top, left, width and height. The javascript setInterval and setTimeout used to giving some time delay before each div element being manipulated.

$(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();
    });
});

The CSS

The div element position must be in “absolute” value otherwise, when animate started it will screwed the other element position

#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;
}

Result & Download

And here are some screen capture from the result.

View Demo | Download Source

step 1

step 2

step 3