jQuery: create a skills graph

by gabrieleromanato

HTML

<div id="skills"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
    font: 100% 'Open Sans', sans-serif;
}

#skills {
    width: 40em;
    margin: 2em auto;
}

#skills div.row {
    overflow: hidden;
    margin-bottom: 1em;
}

#skills h2 {
    font-size: 1.5em;
    text-transform: uppercase;
    float: left;
    width: 200px;
    padding-bottom: 0.5em;
    height: 1em;
    line-height: 1;
}

#skills p {
    width: 0em;
    height: 1.5em;
    background: #069;
    float: left;
}

JavaScript

var Skills = new

function() {

    var wrapper = document.getElementById('skills');

    var $skills = {
        html5: '20em',
        php: '18em',
        jquery: '20em',
        wordpress: '18em',
        css: '20em'
    };


    var create = function() {

        var html = '';
        for (var i in $skills) {

            var skill = i;
            var value = $skills[i];

            html += '<div class="row">';
            html += '<h2>' + skill + '</h2>';
            html += '<p data-width="' + value + '"></p>';
            html += '</div>';

        }


        $(wrapper).html(html);

    };

    var animation = function() {
        var delay = 0;
        $('p[data-width]', wrapper).each(function() {

            var $p = $(this);
            $p.queue('width', function(next) {

                $p.delay(delay).animate({
                    width: $p.data('width')
                }, 600, 'easeInOutExpo', next);

            });

            $p.dequeue('width');
            delay += 300;
        });

    };

    this.init = function() {
        create();

        setTimeout(function() {
            animation();
        }, 500);

    };

}();


Skills.init();