0

I know there are few questions about bootstrap progress bar's active class, but I couldn't find an answer that could help me (css + bar)
Im building a progress bar (striped and active) in bootstrap 3. I added some css to animate the bar (like a loading bar) to reach the correct value in a nice way. If i remove that css then the .active class in the progress bar works just fine.
Is there a way to let css and .active cooperate?

.progress-bar {
  width: 0;
  animation: progress 0.9s ease-in-out forwards;
}
.title {
  opacity: 0;
  animation: show 0.35s forwards ease-in-out 0.5s;
}

    
@keyframes progress {
  from {
    width: 0;
  }
  to {
      width: 100%;
  }
} 
@keyframes show  {
  from {
    opacity: 0;
  }
  to {
      opacity: 1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="max-width: 80%">
    <span class="title">80%</span>
  </div>
</div>


If you add the .active class from the snippet, it just doesn't work...the css is the problem i guess, but i don't know how to fix it...
Any suggestion?

alesssz
  • 384
  • 4
  • 18
  • what you wrote here is not css. Nesting selectors is not valid css – Mihai T Sep 04 '19 at 11:08
  • @MihaiT i found it in a guide and it says it's css...my bad i guess, that could be the problem then? – alesssz Sep 04 '19 at 11:09
  • well the styles won't be applied to `title`. – Mihai T Sep 04 '19 at 11:14
  • @MihaiT you're right, i edited that part and that class is working fine now...but still the .active class cannot work – alesssz Sep 04 '19 at 11:18
  • 1
    Yes. Check my answer below – Mihai T Sep 04 '19 at 11:23
  • 1
    you would need to assign both animations to the element, atm your width animation is overriding your active animation - try `animation: show 0.35s forwards ease-in-out 0.5s, progress-bar-stripes 2s linear infinite`: https://www.bootply.com/jPqPpGZ0QI – Pete Sep 04 '19 at 11:26

1 Answers1

1

The problem is that active class adds an animation to the progress-bar so it overwrites your animation.

You can wrap your progress-bar in a div. And animate that div from width 0 to 100%. So the animations are on 2 different elements and don't overlap.

See below

.wrap {
  width: 0;
  animation: progress 0.9s ease-in-out forwards;

  
}
.title {
    opacity: 0;
    animation: show 0.35s forwards ease-in-out 0.5s;
    }
    
@keyframes progress {
  from {
    width: 0;
  }
  to {
      width: 100%;
  }
} 
@keyframes show  {
  from {
    opacity: 0;
  }
  to {
      opacity: 1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div class="progress">
<div class="wrap">
  <div class="progress-bar progress-bar-striped active " role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="title">80%</span>
    </div>
  </div>
</div>
Mihai T
  • 17,254
  • 2
  • 23
  • 32