Stop animation from right to left

Question

I want this progress bar to animate only from left to right, starting from text. After animation ends from right to left, it starts animating from right to left, from some point. Note, I need to use the flexbox and width for text.

.table-bars .bar-box .text {
 height: 100%;
 margin: 0 30px 0 200px;
 width: 200px;
    text-align:right;
}
.bar-box {
    margin-bottom:20px;
   }
.table-bars div .progress {
    background-color: #0071b9;
    border-radius: 20px;
    border-right: 13px solid rgb(0, 173, 239);
    -webkit-animation: progressBar 2s ease-in-out;
    -webkit-animation-fill-mode:both;
    -moz-animation: progressBar 2s ease-in-out;
    -moz-animation-fill-mode:both;
    height: 20px;
}

@-webkit-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

@-moz-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

.bar-box {
 display: flex;
}

<div class="table-bars">
     <div class="bar-box">
           <div class="text"><span>TEXT</span></div>
           <div class="progress"></div>
     </div>
     <div class="bar-box">
           <div class="text"><span>Another TEXT</span></div>
           <div class="progress"></div>
     </div>
</div>

I need the width, because I have multiple texts that I need to style it aligned right — art, Apr 15 '20 at 22:01

score 1 · Accepted Answer · answered Apr 15 '20 at 22:31

You need to either add flex-shrink:0 to avoid the shriking of the text because you are setting width:100%

.table-bars .bar-box .text {
  height: 100%;
  margin: 0 30px 0 200px;
  width: 200px;
  text-align: right;
  flex-shrink:0;
}

.bar-box {
  margin-bottom: 20px;
}

.table-bars div .progress {
  background-color: #0071b9;
  border-radius: 20px;
  border-right: 13px solid rgb(0, 173, 239);
  animation: progressBar 2s ease-in-out;
  animation-fill-mode: both;
  height: 20px;
}

@keyframes progressBar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.bar-box {
  display: flex;
}

<div class="table-bars">
  <div class="bar-box">
    <div class="text"><span>TEXT</span></div>
    <div class="progress"></div>
  </div>
  <div class="bar-box">
    <div class="text"><span>Another TEXT</span></div>
    <div class="progress"></div>
  </div>
</div>

Or animate the flex-grow instead of width:

.table-bars .bar-box .text {
  height: 100%;
  margin: 0 30px 0 200px;
  width: 200px;
  text-align: right;
  flex-shrink:0;
}

.bar-box {
  margin-bottom: 20px;
}

.table-bars div .progress {
  background-color: #0071b9;
  border-radius: 20px;
  border-right: 13px solid rgb(0, 173, 239);
  animation: progressBar 2s ease-in-out;
  animation-fill-mode: both;
  height: 20px;
}

@keyframes progressBar {
  0% {
    flex-grow: 0;
  }
  100% {
    flex-grow: 1;
  }
}

.bar-box {
  display: flex;
}

<div class="table-bars">
  <div class="bar-box">
    <div class="text"><span>TEXT</span></div>
    <div class="progress"></div>
  </div>
  <div class="bar-box">
    <div class="text"><span>Another TEXT</span></div>
    <div class="progress"></div>
  </div>
</div>

Related: Why is a flex item limited to parent size?

Stop animation from right to left

1 Answers1