css animation status bar not loading from 0 to its value

Question

I am trying to implement the animation for stacked progress bars where the first one will load then the second one loads from the first one finished. Here's my css. Each status bar is a div and all div's returned in one big div. Any idea what am i missing? it wont load the progress bars from 0 to their value one by one from left to right. Thanks for reading

.terra-ProgressGroup {
  flex: auto;
  display: flex;
  background: #d3d4d5;
  flex-direction: row;
  border-radius: 0.5em;
  overflow: auto;
  animation-delay: 3s;  
}

.terra-ProgressGroup div {
  transform: translateX(-100%);
  animation: loadbar 3s forwards;
  -webkit-animation: loadbar 3s forwards;
  opacity: 0;
}

@keyframes loadbar {
  0% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.terra-ProgressGroup--progress {
  // flex: 1 1 auto;
  border-radius: 0em;
  padding-right: 1px;
  animation-delay: 3s;
  // background-color: #ffffff;
}

.terra-ProgressGroup--progress:not(:first-child){
  // background-color: #ffffff;
  // padding-right: 1px;
}

Rendered HTML:

<div><h1 class="u-pb--lg text-bold">Grouped ProgressBar Component Examples</h1><div class="space"><div> Example: User earning all the points</div><div class="terra-ProgressGroup"><!-- react-text: 94 --> <!-- /react-text --><div class="well-background--concept1 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><div class="well-background--concept2 terra-ProgressGroup--progress" style="width: 20%; height: 50px;"></div><div class="well-background--concept3 terra-ProgressGroup--progress" style="width: 40%; height: 50px;"></div><div class="well-background--concept4 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><div class="well-background--concept5 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><div class="well-background--concept6 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><!-- react-text: 101 --> <!-- /react-text --></div></div><div><div> Example: User earning 600 of 1000 points(50/150/300/100)</div><div class="terra-ProgressGroup"><!-- react-text: 105 --> <!-- /react-text --><div class="well-background--concept1 terra-ProgressGroup--progress" style="width: 5%; height: 50px;"></div><div class="well-background--concept2 terra-ProgressGroup--progress" style="width: 15%; height: 50px;"></div><div class="well-background--concept3 terra-ProgressGroup--progress" style="width: 30%; height: 50px;"></div><div class="well-background--concept4 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><!-- react-text: 110 --> <!-- /react-text --></div></div></div>

Please provide your `HTML` and, if possible, a link to your running code. — Andy Hoffman, Jul 17 '17 at 22:58
@AndyHoffman I am using a react component for this. Please check the updated question. creating an array of div's and passing it to the big div — User7354632781, Jul 17 '17 at 23:34
Why didn't you choose a solution to your previous question? Looks like you're using the code from the solution I gave you here. Also, you should just post the rendered HTML, you're much more likely to get a solution that way. Just bring your app up and copy the html from dev tools so we have a working demo. — Michael Coker, Jul 17 '17 at 23:49
@MichaelCoker Please check the html i added in question. Let me know if that helps. Thanks — User7354632781, Jul 17 '17 at 23:57
Wow!!! Thats really cool. But do we have to create classes for concept colors? those will be the inputs. User can pass any concept color — User7354632781, Jul 18 '17 at 00:20
Be sure to @ me or I don't get a notification for the reply. What do you mean user can pass any concept color? — Michael Coker, Jul 18 '17 at 02:02
@MichaelCoker. It will be a fixed sequence of colors so it should be good. One other question, i wanted to add a free space of 1px after each progress bar so i added a margin-right: 1px in terra-progressGroup--progress class but since the background of outer div is gray it doesnt show that line clearly. is there any way we can set just that margin color to white? Also please add your answer to answer this question and i'll mark it as answer :) ...Really appreciate your help — User7354632781, Jul 18 '17 at 03:48
@MichaelCoker Is there any chance i can load the bars smoothly from left to right instead of starting and stopping? — User7354632781, Jul 18 '17 at 14:52
@User7354632781 you mean all at once? I thought you wanted "the first one will load then the second one loads from the first one finished". BTW you should actually reply to my comment like you just did. If you do that, you don't have to @ me. — Michael Coker, Jul 18 '17 at 14:53

score 0 · Answer 1 · answered Jul 18 '17 at 08:43

Not sure what effect you are aiming for, but the way you have it set up now, all the bars have their final width right at the start. Using transform: translateX(-100%); only moves the right as much as their own width.

That's why you're seeing the 3rd element start from half way the loading bar.

If you want the bars to start with 0 width and expand out, I'd look at scaling.

Michael Coker · Accepted Answer · 2017-07-19T03:36:30.237

You just need to give the elements a background color and offset the animation-delay for each bar. You will also need to use a negative z-index to keep the previous items on top of the later ones.

And for the white bar, you can use a border-right on all of the bars but the :last-child

.terra-ProgressGroup {
  display: flex;
  background: #d3d4d5;
  flex-direction: row;
  border-radius: 0.5em;
  overflow: auto;
  position: relative;
  z-index: 1;
}

@keyframes loadbar {
  0% {
    opacity: 1;
  }
  100% {
    transform: translateX(0) translate3d(0,0,0);
    opacity: 1;
  }
}

.terra-ProgressGroup--progress {
  transform: translateX(-100%) translate3d(0,0,0);
  animation: loadbar 3s linear forwards;
  -webkit-animation: loadbar 3s linear forwards;
  opacity: 0;
  background: blue;
}

.terra-ProgressGroup--progress:not(:last-child) {
  border-right: 1px solid white;
}

.well-background--concept2 {
  background: blue;
}

.well-background--concept2 {
  background: pink;
  animation-delay: 3s;
  z-index: -1;
}
.well-background--concept3 {
  background: purple;
  animation-delay: 6s;
  z-index: -2;
}
.well-background--concept4 {
  background: red;
  animation-delay: 9s;
  z-index: -3;
}
.well-background--concept5 {
  background: green;
  animation-delay: 12s;
  z-index: -4;
}
.well-background--concept6 {
  background: yellow;
  animation-delay: 15s;
  z-index: -5;
}

<div>
  <h1 class="u-pb--lg text-bold">Grouped ProgressBar Component Examples</h1>
  <div class="space">
    <div> Example: User earning all the points</div>
    <div class="terra-ProgressGroup">
      <!-- react-text: 94 -->
      <!-- /react-text -->
      <div class="well-background--concept1 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div>
      <div class="well-background--concept2 terra-ProgressGroup--progress" style="width: 20%; height: 50px;"></div>
      <div class="well-background--concept3 terra-ProgressGroup--progress" style="width: 40%; height: 50px;"></div>
      <div class="well-background--concept4 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div>
      <div class="well-background--concept5 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div>
      <div class="well-background--concept6 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div>
      <!-- react-text: 101 -->
      <!-- /react-text -->
    </div>
  </div>
  <div>
    <div> Example: User earning 600 of 1000 points(50/150/300/100)</div>
    <div class="terra-ProgressGroup">
      <!-- react-text: 105 -->
      <!-- /react-text -->
      <div class="well-background--concept1 terra-ProgressGroup--progress" style="width: 5%; height: 50px;"></div>
      <div class="well-background--concept2 terra-ProgressGroup--progress" style="width: 15%; height: 50px;"></div>
      <div class="well-background--concept3 terra-ProgressGroup--progress" style="width: 30%; height: 50px;"></div>
      <div class="well-background--concept4 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div>
      <!-- react-text: 110 -->
      <!-- /react-text -->
    </div>
  </div>
</div>

yes "the first one will load then the second one loads from the first one finished" but right now we have its like speeding up slowing down. want to load them smoothly from left to right. — User7354632781, Jul 18 '17 at 14:58
@User7354632781 ah gotcha, the default animation-timing is `ease` I think, just change it to `linear`, or you can change it to whatever https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function updated my answer — Michael Coker, Jul 18 '17 at 15:02
Thank you again Michael Coker. Learning lot of good stuff. I'll play with those animation timing — User7354632781, Jul 18 '17 at 15:12
question, do you know how can i just create one single class in css instead creating 6 classes? I am thinking to get that number from react in a variable and pass that to single function `:root { --concept-code: conceptNumber; --concept-code2: -conceptNumber; } .animation { animation-delay: var(--concept-code)s; z-index: var(--concept-code2); }` — User7354632781, Jul 18 '17 at 21:24
I don't know how you would apply different animation properties to different elements using a single class. I would just use SASS (or react? I don't know, don't use it) since everything has a consistent increment. class name +1, animation-delay +3, z-index -1. — Michael Coker, Jul 18 '17 at 21:33
I was able to extract the numeric value from concept color(e.g concept1, concept2..) assign that to animation-delay and zIndex and call both properties in div. I see its working fine on all browsers except safari. do you know any chance why zIndex doesnt work with safari and how can i fix that? — User7354632781, Jul 19 '17 at 03:26
@User7354632781 ah good catch, stupid bug in safari. https://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d updated my answer. — Michael Coker, Jul 19 '17 at 03:36
I had to make some changes because of comments by my senior developers. I am basically calculating animation-delay based on the % value of each progressBar and then converting it into Seconds but now the progressBars aren't loading smoothly from left to right. Here are the changes https://codepen.io/Nick1212/pen/WOVLaB?editors=1100 — User7354632781, Jul 21 '17 at 04:58
is there any css property i can use to load the progress bar in 3 sec? i tried to change animation-delay and animation props but no luck — User7354632781, Jul 25 '17 at 17:46

css animation status bar not loading from 0 to its value

2 Answers2