Flickr Style Loading Animation Using JQuery

February 25th, 2011 by aditia rahman / 4 Comments  

     

A couple week ago I have posted about creating facebook loading bar, and now this post will show a similar thing, in flickr loading animation, like before this not showing the real size, because we are using html element we can easily to change the element size.

jquery flickr loading animation

The flickr loading animation is simpler than the facebook style, it consist of two circles with different color, when the animation start the circle on the left move to right with on top display and vice versa.

View Demo | Download Source

The HTML

This are html element that will used as the main animation bar.

<div id="shapeblue" class="bar"></div>
<div id="shapepink" class="bar"></div>
The JQuery

To make the loading animation bar position on the center, I’m using JQuery to rearrange the bar position, this example using JQuery animate function to moving the element, and javascript setInterval and clearInterval function to starting and stopping animation. And to displaying which circle is disaplyed on the top, we can using z-index CSS property, that manipulated continually by JQuery.

$(function() {
    var wwidth = $(window).width();
    var bluewidth = $("#shapeblue").width();

    $("#shapeblue").css("left", (wwidth/2) - bluewidth);

    var bluepos = $("#shapeblue").position();
    var movex = $("#shapeblue").width() + 4;
    $("#shapepink").css("left", bluepos.left + movex);

    var playAnimate;

    function moveleft(el) {
        $(el).animate({
            left: '+='+movex
        }, 800, function() {
            $(el).css("z-index", "-100");
        });
    }

    function moveright(el) {
        $(el).animate({
            left: '-='+movex
        }, 800, function() {
            $(el).css("z-index", "100");
        });
    }

    function playAnimation() {
        moveleft("#shapeblue");
        moveright("#shapeblue");
        moveright("#shapepink");
        moveleft("#shapepink");
    }

    $("#playbtn").click(function() {
        if ($(this).text() == "Start") {
            playAnimate = setInterval(playAnimation, 800);
            $(this).text("Stop");
        } else {
            clearInterval(playAnimate);
            $(this).text("Start");
        }
        return false;
    });
});
The CSS

Here are the default CSS style for the animation bar.

.bar {
    width: 250px;
    height: 250px;
    -webkit-border-radius: 7.5em;
    -moz-border-radius: 7.5em;
    border-radius: 7.5em;
    margin-right: 2px;
    position: absolute;
}
#shapeblue {
    background: #0063dc;
    z-index: 1;
}
#shapepink {
    background: #ff0084;
    z-index: 0;
}

View Demo | Download Source

jquery flickr loading animation screencapture

        submit to reddit Delicious

4 Comments Leave a Comment Subscribe RSS

Leave a Comment