100% прогресс бар все время

Question

Я пытаюсь оживить мой индикатор выполнения до его фактической ширины, однако он заполняется полностью до 100%. Так как я могу сослаться на ширину индикатора выполнения в css? потому что у меня есть несколько баров, и я не могу исправить css или написать несколько.

.progressing {
  -webkit-animation: progressBar 3s ease-in-out;
  -webkit-animation-fill-mode: both;
  -moz-animation: progressBar 3s ease-in-out;
  -moz-animation-fill-mode: both;
}

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<table id="announcementtable" class="table table-hover" style="text-align: center;width: 90%;margin: auto;">
  <tbody>
    <tr>
      <th style="">#</th>
      <th style="border-left-width: 0px;" colspan="2">title</th>
      <th></th>
    </tr>
    <tr class="toprow" style="">
      <td class="fold">6</td>
      <td class="fold" style="border-left-width: 0px;" colspan="2">news1</td>
      <td style="border-right-width: 0px;"></td>
    </tr>
    <tr style="display: ;">
      <td class="">%</td>
      <td style="border-left-width: 0px;" colspan="3">
        <p style="margin:auto;left: 66.5%;transform: translate(-50%,0%);position: absolute;color:white;">80%</p>
        <div class="progress" style="margin: auto;margin-right: 1%;border-radius: 5px;height: 20px;">
          <div class="progress-bar progress-bar-striped bg-success progress-bar-animated progressing" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="80" style="width: 80%;font-size: .875rem;"></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Изменить width на max-width

.progressing {
    -webkit-animation: progressBar 3s ease-in-out;
    -webkit-animation-fill-mode:both; 
    -moz-animation: progressBar 3s ease-in-out;
    -moz-animation-fill-mode:both; 
}

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table id="announcementtable" class="table table-hover" style="text-align: center;width: 90%;margin: auto;">
        	<tbody>
        		<tr>
        			<th style="">#</th>
        			<th style="border-left-width: 0px;" colspan="2">title</th>
        			<th></th>
        		</tr>
        		<tr class="toprow" style="">
        			<td class="fold">6</td>
        			<td class="fold" style="border-left-width: 0px;" colspan="2">news1</td>
        			<td style="border-right-width: 0px;"></td>
        		</tr>
        		<tr style="display: ;">
        			<td class="">%</td>
        			<td style="border-left-width: 0px;" colspan="3">
        				<p style="margin:auto;left: 66.5%;transform: translate(-50%,0%);position: absolute;color:white;">80%</p>
        				<div class="progress" style="margin: auto;margin-right: 1%;border-radius: 5px;height: 20px;">  
        					<div class="progress-bar progress-bar-striped bg-success progress-bar-animated progressing" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="80" style="width: 80%;font-size: .875rem;"></div>
        				</div>
        			</td>
        		</tr>
                    		<tr style="display: ;">
        			<td class="">%</td>
        			<td style="border-left-width: 0px;" colspan="3">
        				<p style="margin:auto;left: 66.5%;transform: translate(-50%,0%);position: absolute;color:white;">90%</p>
        				<div class="progress" style="margin: auto;margin-right: 1%;border-radius: 5px;height: 20px;">  
        					<div class="progress-bar progress-bar-striped bg-success progress-bar-animated progressing" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="80" style="width: 90%;font-size: .875rem;"></div>
        				</div>
        			</td>
        		</tr>
                    		<tr style="display: ;">
        			<td class="">%</td>
        			<td style="border-left-width: 0px;" colspan="3">
        				<p style="margin:auto;left: 66.5%;transform: translate(-50%,0%);position: absolute;color:white;">60%</p>
        				<div class="progress" style="margin: auto;margin-right: 1%;border-radius: 5px;height: 20px;">  
        					<div class="progress-bar progress-bar-striped bg-success progress-bar-animated progressing" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="80" style="width: 60%;font-size: .875rem;"></div>
        				</div>
        			</td>
        		</tr>
        	</tbody>
        </table>

И если вы хотите, чтобы они заканчивались одновременно, вы можете изменить animation-duration во встроенном стиле на width, например, animation-duration = full-duration / percentage (т.е. для 3 с для 100% бара, для 60% бара 3 / .6 = 5 секунд):

.progressing {
    -webkit-animation: progressBar 3s linear;
    -webkit-animation-fill-mode:both; 
    -moz-animation: progressBar 3s linear;
    -moz-animation-fill-mode:both; 
}

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table id="announcementtable" class="table table-hover" style="text-align: center;width: 90%;margin: auto;">
        	<tbody>
        		<tr>
        			<th style="">#</th>
        			<th style="border-left-width: 0px;" colspan="2">title</th>
        			<th></th>
        		</tr>
        		<tr class="toprow" style="">
        			<td class="fold">6</td>
        			<td class="fold" style="border-left-width: 0px;" colspan="2">news1</td>
        			<td style="border-right-width: 0px;"></td>
        		</tr>
        		<tr style="display: ;">
        			<td class="">%</td>
        			<td style="border-left-width: 0px;" colspan="3">
        				<p style="margin:auto;left: 66.5%;transform: translate(-50%,0%);position: absolute;color:white;">80%</p>
        				<div class="progress" style="margin: auto;margin-right: 1%;border-radius: 5px;height: 20px;">  
        					<div class="progress-bar progress-bar-striped bg-success progress-bar-animated progressing" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="80" style="width: 80%;font-size: .875rem;animation-duration:3.75s"></div>
        				</div>
        			</td>
        		</tr>
                    		<tr style="display: ;">
        			<td class="">%</td>
        			<td style="border-left-width: 0px;" colspan="3">
        				<p style="margin:auto;left: 66.5%;transform: translate(-50%,0%);position: absolute;color:white;">90%</p>
        				<div class="progress" style="margin: auto;margin-right: 1%;border-radius: 5px;height: 20px;">  
        					<div class="progress-bar progress-bar-striped bg-success progress-bar-animated progressing" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="80" style="width: 90%;font-size: .875rem;animation-duration:3.333s"></div>
        				</div>
        			</td>
        		</tr>
                    		<tr style="display: ;">
        			<td class="">%</td>
        			<td style="border-left-width: 0px;" colspan="3">
        				<p style="margin:auto;left: 66.5%;transform: translate(-50%,0%);position: absolute;color:white;">60%</p>
        				<div class="progress" style="margin: auto;margin-right: 1%;border-radius: 5px;height: 20px;">  
        					<div class="progress-bar progress-bar-striped bg-success progress-bar-animated progressing" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="80" style="width: 60%;font-size: .875rem;animation-duration:5s"></div>
        				</div>
        			</td>
        		</tr>
        	</tbody>
        </table>