4，进度条2

<div class="gradeinfo"  id="gradeinfo" style="display: none">

   <!-- <div>

        <span>等级</span>

        <span class="grade">5</span>

      </div>-->

      <div class="htmleaf">

          <div class="perinfo"></div>

      </div>

</div>

<input type="button" onclick="aa()" value="触发按钮">

css

.gradeinfo {

display:flex;

flex-flow:row nowrap;

justify-content:center;

align-items:center;

}

.htmleaf {

width:300px;

height:30px;

line-height:30px;

border-radius:15px;

box-shadow:0px 0px 1px 1px #888888 inset;

display:flex;

align-items:center;

margin-left:10px;

position:relative;

overflow:hidden;

}

.perinfo {

margin-left:2px;

height:26px;

border-radius:15px;

position:absolute;

left:0px;

}

js

    function show(){

    //可在personalinfo设置等级的存储，直接取出来。还要知道当前等级最高和最低的经验值

    var a = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    //设置父级的width为100%，计算子级的宽度

    var htmleaf_ = 3500;

    var perinfo_ = 3000;

    var htmleaf_w = $(".htmleaf").width();

    var perinfo_w = parseFloat(perinfo_ / htmleaf_) * htmleaf_w;

    $(".perinfo").css({

        "left": -perinfo_w,

        "width": perinfo_w,

        "background": "red"

    });

    $(".perinfo").animate({

        "left": "0px"

    }, 700);

}

function sgowdiv(){

    document.getElementById("gradeinfo").style.display="";   //显示进度条

}

function aa() {   //触发

    sgowdiv();

    show();

   // a();

}