CODEWITHSUNDEEP
htmlcss
art
art

Reputation: 167

Stop animation from right to left

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>

Upvotes: 0

Views: 125

Answers (1)

Temani Afif
Temani Afif

Reputation: 272817

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?

Upvotes: 1

Related Questions