【问题标题】：100% progress bar all the time一直100%进度条
【发布时间】：2020-02-24 01:20:14
【问题描述】：
我正在尝试将进度条设置为实际宽度，但是，它一直填充到 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>
【问题讨论】：
标签：
jquery
html
css
progress-bar
【解决方案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（即为3s对于 100% bar，对于 60% bar 是 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>