CODEWITHSUNDEEP
javascriptjqueryhtmlcsssass
rj487
rj487

Reputation: 4634

Javascript: How to write a progress bar?

I've written some scss code to display my skill in a percentage diagram:

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>

It can display it fine, like this: enter image description here

What I want is to add some javascript or jQuery code to make this diagram like an animation. Just like a progress bar I want it to do this animation when the page is loaded.

Upvotes: 0

Views: 66

Answers (1)

Mohammad
Mohammad

Reputation: 21489

You can use jquery animate() to do this work

$(".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>

Upvotes: 2

Related Questions