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>