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

看效果：

image.png

.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:

<div class="bar"></div>

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.length;i++){
                html+='<div class="row">\n' +
                    '        <span class="desc">'+barData[i].desc+'</span>\n' +
                    '        <span class="num">'+barData[i].num+'</span>\n' +
                    '        <span class="progressBar">\n' +
                    '            <span class="percent"></span>\n' +
                    '        </span>\n' +
                    '    </div>'
            }
            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;
        }
    }