How to stop progress bar animation?

Question

I tried to figure out this issue. How do I stop the progress bar after the animation ends?

 ul li {list-style:none;}
    li {width:100%;height:30%;background-color:#ccc;margin-top:20px;position:relative;}
    .skillsBar ul li .bar{
        animation: Ani linear 7s 1 normal;background-color:#f00;height: 100%; position: absolute; top:0;
    }
    .skillsContWrpa .skillsBar ul li .bar{
        animation-name:Ani;
        animation-duration: 7s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-direction: alternate;
        animation-fill-mode: both;
    }

    @keyframes Ani {
        0% { width:0%; } 
        100% { width:90%; } 
    }

<div class="skillsBar">
      <ul>
          <li><span>PHOTOSHOP 90%</span>
          <div class="bar"></div>
          </li>
          <li><span>HTML CSS 80%</span></li>
          <li><span>DEVELOPMENT 70%</span></li>
          <li><span>MARKETING 80%</span></li>
      </ul>
    </div>

Are you allowed to use javascript? or you are looking for css solution only? — AKNair, Dec 07 '18 at 05:07
you simply have a typo issue : there is no class `.skillsContWrpa` so remove this from the CSS — Temani Afif, Dec 07 '18 at 08:05

score 0 · Answer 1 · answered Dec 07 '18 at 05:20

I think this is what you are looking for: Solution to your question - Codepen link

You have to use this basic structure:

<div class="skillbar clearfix javascript" data-percent="80%">
    <h4 class="skillbar-title"><span>Development</span></h4>
    <div class="skillbar-bar"></div>
    <div class="skill-bar-percent">80%</div>
</div>

Inside data-percent="" you can put any percentage and animation will work accordingly.

score 0 · Accepted Answer · answered Dec 07 '18 at 07:23

add "animation-fill-mode: forwards;" to your css class ".bar"

forward -> The element will retain the style

ul li {list-style:none;}

li {width:100%;height:30%;background-color:#ccc;margin-top:20px;position:relative;}

.bar{
    background-color:#f00;
    height: 100%;
    position: absolute;
    top:0;
    animation: Ani linear 7s normal;
    animation-fill-mode: forwards;
}

@keyframes Ani {
    0% { width:0%; } 
    100% { width:90%; } 
}

<div class="skillsBar">
  <ul>
      <li>
          <span>PHOTOSHOP 90%</span>
          <div class="bar"></div>
      </li>
      <li><span>HTML CSS 80%</span></li>
      <li><span>DEVELOPMENT 70%</span></li>
      <li><span>MARKETING 80%</span></li>
  </ul>
</div>

values that is set by the last keyframe.

How to stop progress bar animation?

2 Answers2