Load each progress bar from 0 to its value in multiple progress bar animation

Question

I am trying to add animation in grouped progress bar that will load each progress bar from 0 to its value. eg in my sample code below I want to first load red progress bar then load the green progress bar. How can I do that?

Please check the code in this jsfiddle .

html:

<div class="progress-bar-outer">
  <div class="progress-bar-inner">
  </div>
  <div class="progress-bar-inner2">
  </div>
</div>

css:

.progress-bar-outer {
  width: 300px;
  height: 40px;
  flex: auto;
  display: flex;
  flex-direction: row;
  border-radius: 0.5em;
  overflow: hidden;
  background-color: gray;
}
.progress-bar-inner {
  /* You can change the `width` to change the amount of progress. */
  width: 75%;
  height: 100%;
  background-color: red;
}
.progress-bar-inner2 {
  /* You can change the `width` to change the amount of progress. */
  width: 50%;
  height: 100%;
  background-color: green;
}

.progress-bar-outer div {
      animation:loadbar 3s;
    -webkit-animation:loadbar 3s;
}

@keyframes loadbar {
    0% {width: 0%;left:0;right:0}
}

Answer 1

I would transition transform instead for better performance. Use translateX(-100%) with opacity: 0 to move them to their default, hidden position, then animate to translateX(0); opacity: 1; translateX(0); opacity: 1; to put them in place. And just add an animation-delay to the green bar that matches the animation-duration

I made the bars semi-opaque to show when the animations fire.

 .progress-bar-outer { width: 300px; height: 40px; border-radius: 0.5em; overflow: hidden; background-color: gray; display: flex; } .progress-bar-inner { /* You can change the `width` to change the amount of progress. */ width: 75%; background-color: red; } .progress-bar-inner2 { /* You can change the `width` to change the amount of progress. */ width: 100%; background-color: green; } .progress-bar-outer div { transform: translateX(-100%); animation: loadbar 3s forwards; -webkit-animation: loadbar 3s forwards; opacity: 0; } .progress-bar-outer .progress-bar-inner2 { animation-delay: 3s; } @keyframes loadbar { 0% { opacity: 1; } 100% { transform: translateX(0); opacity: 1; } } 

 <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress --> <div class="progress-bar-outer"> <div class="progress-bar-inner"> </div> <div class="progress-bar-inner2"> </div> </div> 

Answer 2

Modified Michael Coker's answer to better reflect my interpretation of what you're asking for.

 .progress-bar-outer { width: 300px; height: 40px; border-radius: 0.5em; overflow: hidden; background-color: gray; position: relative; } .progress-bar-inner { /* You can change the `width` to change the amount of progress. */ width: 100%; background-color: red; z-index: 1; } .progress-bar-inner2 { /* You can change the `width` to change the amount of progress. */ width: 100%; background-color: green; z-index: 2; } .progress-bar-outer div { position: absolute; top: 0; bottom: 0; transform: translateX(-100%); animation: loadbar 3s linear; -webkit-animation: loadbar 3s linear; opacity: 1; } .progress-bar-outer .progress-bar-inner2 { animation-delay: 3s; } @keyframes loadbar { 100% { transform: translateX(0); } } 

 <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress --> <div class="progress-bar-outer"> <div class="progress-bar-inner"> </div> <div class="progress-bar-inner2"> </div> </div> 

Answer 3

Apply Transition to inner classes, add delays to secondary inner and use opacity to hide the element before transition begins.

.progress-bar-inner {
  animation:loadbar 2s;
  -webkit-animation:loadbar 2s;
}
.progress-bar-inner2 {
  -webkit-animation: loadbar 2s ease 2s forwards;
  animation: loadbar 2s ease 2s forwards
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  opacity:0;
}

@keyframes loadbar {
    0% { width: 0%;left:0;right:0}
    1% { opacity: 1}
    100% { opacity: 1}
}

See working example: https://jsfiddle.net/dfkLexuv/10/