Horizontal bar graph with CSS3 and jQuery

Horizontal bar graph with CSS3 and jQuery Source: http://www.jscraft.net/experiments/horizontal-bar-graph-with-css3-and-jquery.html

HTML

<div class="wrap">
        <h1>Horizontal bar graph with CSS3 and jQuery</h1>
        <p>Source: <a href="http://www.jscraft.net/experiments/horizontal-bar-graph-with-css3-and-jquery.html">http://www.jscraft.net/experiments/horizontal-bar-graph-with-css3-and-jquery.html</a></p>
        <p>Mod by Pete: Starting from 65% (see the initial value of the input field!)</p>
        <div class="bar">
            <div class="percent">
                <span style="width: 100%;"></span>
            </div>
            <div class="circle">
                <span>0%</span>
            </div>
        </div>
        <div class="text">
            <input type="text" class="input" value="50" />
            <small>Please change a value and hit the enter key.</small>
        </div>
        
    </div>

CSS

/* http://www.jscraft.net/demo/experiment/bargraph/css/default.css */

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


/* ------ general
-----------------------------------------------*/

html, body {
    padding:0;
    margin:0;
}

body {
    font-family:Arial, Helvetica, sans-serif;
    background:#eee;
    color:#777;
    width:500px;
    position:relative;
}

/*

.carbonad {
    border:none !important;
    background: none !important;
    position:absolute;
    top:20px;
    right:20px;
} 
*/

.wrap {
    position:absolute;
    /*
    top:50%;
    left:50%;
    */
    width:400px;
    height:500px;
    margin:-200px 0 0 -400px;
    margin:30px;
}

h1 {
    font-size:40px;
    font-family:'PT Sans Narrow', sans-serif;
    text-align:center;
    margin:0;
    /*
    margin-bottom:120px;
    */
    text-shadow:5px 5px 0 #ddd;
}

.bar {
    float:left;
    clear:both;
    width:100%;
    height:40px;
    position:relative;
    margin-top:55px;
}

.bar .percent {
    background:#2caedd;
    background:-moz-linear-gradient(left, #2caedd 0%, #86dd2a 28%, #e0d72a 46%, #e8902c 66%, #ed2d2d 86%, #ff0000 100%);
    background:-webkit-gradient(linear, left top, right top, color-stop(0%,#2caedd), color-stop(28%,#86dd2a), color-stop(46%,#e0d72a), color-stop(66%,#e8902c), color-stop(86%,#ed2d2d), color-stop(100%,#ff0000));
    background:-webkit-linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
    background:-o-linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
    background:-ms-linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
    background:linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2caedd', endColorstr='#ff0000', GradientType=1);
    float:left;
    width:100%;
    height:40px;
   ...

JavaScript

// http://www.jscraft.net/demo/experiment/bargraph/js/init.js

$(function(){
    
    var input = $('.input'),
        bar = $('.bar'),
        bw = bar.width(),
        percent = bar.find('.percent'),
        circle = bar.find('.circle'),
        ps =  percent.find('span'),
        cs = circle.find('span'),
        name = 'rotate';
        
    input.on('keydown', function(e){
        if (e.keyCode == 13){
            var t = $(this), val = t.val();
            if (val >=0 && val <= 100){
                var w = 100-val, pw = (bw*w)/100,
                    pa = {
                        width: w+'%'
                    },
                    cw = (bw-pw)/2,
                    ca = {
                        left: cw
                    }
                ps.animate(pa);
                cs.text(val+'%');
                circle.animate(ca, function(){
                    circle.removeClass(name)
                }).addClass(name);    
            } else {
                alert('range: 0 - 100');
                t.val('');
            }
        }
    });

    //         
    var e = jQuery.Event("keydown");
    e.keyCode = e.which = 13; // # Some key code value
    $(input).trigger(e);

    
});