Javascript：如何编写进度条？

Question

我已经编写了一些scss代码，以便在百分比图表中显示我的技能：

SCSS

.skill-percentage-program {
    margin-bottom:10px;
    position:relative;
    &::after {
      content:"";
      width:100%;
      height:6px;
      background:$boldColor;
      display:block;
      margin-top:3px;
}
&::before{
    content:"";
    height:6px;
    background:$linkColor;
    position:absolute;
    margin-top:3px;
    bottom:0;
}
&:nth-child(1)::before {width:70%;animation: skill_1 $time ease;}
&:nth-child(2)::before {width:60%;animation: skill_2 $time ease;} 
&:nth-child(3)::before {width:50%;animation: skill_3 $time ease;}

}

HTML

<ul>
    <li class="skill-percentage-web skill-name">Ruby On Rails</li>
    <li class="skill-percentage-web skill-name" >HTML / CSS  / SASS</li>
    <li class="skill-percentage-web skill-name" >Javascript / Jquery</li>
</ul>

它可以很好地显示，如下所示：

我想要的是添加一些javascript或jQuery代码，以使此图表像动画一样。就像一个进度条，我希望它在页面加载时执行此动画。

Answer 1

您可以使用jquery animate()来完成这项工作

＆＃13;

＆＃13;

$(".progress").each(function(){
    var progress = $(this).data("percent");
    $(this).children("div").animate({"width": progress + "%"}, 2000);
});

＆＃13;

.progress {
    width: 100%;
    height: 10px;
    background: #eee;
    border: 1px solid #ddd;
}

.progress > div {
    width: 0px;
    height: 100%;
    background: #7EC498;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Progress 30%</span>
<div class="progress" data-percent="30">
    <div></div>
</div>
<br/>

<span>Progress 60%</span>
<div class="progress" data-percent="60">
    <div></div>
</div>
<br/>

<span>Progress 90%</span>
<div class="progress" data-percent="90">
    <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;