jquery – 100% progress bar all the time-ThrowExceptions

Exception or error:

I’m trying to animate my progress bar to it’s actual width, however, it fills all the way to 100%. So how can I reference the progress bar width into css? cause I have multiple bars and I cant fix the css or write multiple ones.

.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>
How to solve:

Change width to 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>

And if you want them to end at the same time, you can change the animation-duration in the inline style, with the width, such as animation-duration = full-duration/percentage (i.e. for 3s for 100% bar, for 60% bar is 3/.6=5 second):

.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>

Leave a Reply

Your email address will not be published. Required fields are marked *