javascript - 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()来完成这项工作

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

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

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

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