用jq实现进度显示效果

大神们，我的问题是这样的，截图：

问题是：进度条右侧的数值是变动的，哪个值大，进度条就最长，进度条的长度以当前值/总值的百分比，其他的长度依次按比值展示。如果后面的值大于前方，就会对应的取待。取待时最好出现动画效果。
左侧很简单，就是排名的先后，和进度条对应起来。
麻烦大神帮小弟解决一下，不胜感激。

html代码如下：
<!doctype html>
<html lang="en">
<head>

<title>幸运排名</title>

</head>
<body>

用bootStrap吧

只会这么多了，剩下的等大神吧。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<script src="./jquery-1.10.2.min.js" type="text/javascript"></script>
<style type="text/css">
    li,div{width:1000px;border: 1px solid #ccc;}
    .c0 {background-color: red;}
    .c1 {background-color: blue;}
    .c2 {background-color: yellow;}
    .c3 {background-color: green;}
    .c4 {background-color: gray;}
</style>
<script>
    $(function(){
        var arr = new Array(90,20,50,70,40);
        arr = sort(arr);
        var ul = $("ul")
        for (var i = 0; i < arr.length; i++) {
            ul.append('<li><div class="c'+i+'" style="width:'+10 * arr[i] +'px;display:none;">item'+i+'</div></li>');
            $(".c"+i).delay(1000).fadeIn('slow');
        };
    });

    function sort(seq)
    {
        var size = seq.length;
        if (size > 1) {
            var k = seq[0];
            var x = new Array();
            var y = new Array();
            for(var i=1; i< size; i++) {
                if(seq[i] >= k) {
                    x.push(seq[i]);
                } else {
                    y.push(seq[i]);
                }
            }
            x = sort(x);
            y = sort(y);
            return x.concat(k).concat(y);
        } else {
            return seq;
        }
    }
</script>
</head>
<body>
    <ul></ul>
</body>
</html>

【热门文章】