HTML、CSS、JS制作条形可动画进度条

看效果：

image.png

查看演示
上代码：
CSS:

.bar{
            width: 300px;
            font-size: 0;
        }
        .bar .desc,.bar .num,.bar .progressBar{
            display: inline-block;
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .bar .desc,.bar .num{
            width: 20%;
        }
        .bar .num{}
        .bar .progressBar{
            width: 60%;
            height: 6px;
            background-color: #000;
        }
        .bar .progressBar .percent{
            float: left;
            height: 100%;
        }
        .bar .progressBar .percent:before{
            content: '';
            float: left;
            width: 0;
            height: 100%;
            background-color: #f00;
            -webkit-animation: barAnimate 1s 0.4s forwards;
        }
        @-webkit-keyframes barAnimate {
            to{
                width: 100%;
            }
        }

HTML:

JS:

$(function () {
        new Bar();
    });
    function Bar() {
        this.data=null;
        this.$el=$(".bar");
        this.init();
    }
    Bar.prototype={
        init:function () {
            this.setData();
            this.create();
            this.bindEvent();
        },
        //创建DOM
        create:function () {
            var barData=this.data;
            var html="";
            for(var i=0;i'+barData[i].desc+'\n' +
                    '        '+barData[i].num+'\n' +
                    '        \n' +
                    '            \n' +
                    '        \n' +
                    '    

' } this.$el.empty().append(html); }, //绑定事件 bindEvent:function () { this.$el.find(".row").each(function (i,ele) { var num=parseInt($(ele).find(".num").text()); var value=100;//设置总值为100 $(ele).find(".percent").css("width",(num/value)*100+"%") }) }, //设置数据 setData:function () { var barData=[ {desc:'语文',num:this.getRandomInt(0,100)}, {desc:'数学',num:this.getRandomInt(0,100)}, {desc:'英语',num:this.getRandomInt(0,100)}, ]; this.data=barData; }, //得到一个两数之间的随机整数 getRandomInt:function (min,max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; } }