Javascript：如何编写进度条？答案

【问题标题】：Javascript: How to write a progress bar?Javascript：如何编写进度条？
【发布时间】：2016-09-30 10:25:48
【问题描述】：

我已经编写了一些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 代码，使这个图表像动画一样。就像进度条一样，我希望它在页面加载时执行此动画。

【问题讨论】：

我喜欢这种讽刺
“在百分比图中显示我的技能”？ :-)
@CodaChang 这是你的目的吗？
完全正确！！谢谢，你帮了我很大的忙，对不起我的英语表达能力。

标签： javascript jquery html css sass

【解决方案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>

【讨论】：