如何在PHP中动态显示进度栏

Question

我创建了一个评分系统，要在其中创建进度条，如下图所示。但我无法动态制作进度条宽度，该宽度不会根据html每个栏中的rate3和rate 5之类的等级显示进度。

最后，是指我想根据等级显示进度条。我不知道实现这一目标的公式。评分系统如何创建此功能，以显示总宽度100以外的进度。

请理解我。

谢谢，我尝试在stackoverflow上找到这种类型的文章，但是我没有得到相似且有用的答案，所以我请这个线程不要垃圾邮件和重复邮件。

Datebase name = "CodexWorld"
|---------------------|--------------|
|ID     |  rate5      |  rate3       |
|---------------------|--------------|
|1      |  84         |   23         |
|---------------------|--------------|
|2      |  102        |  10          |
|---------------------|--------------|
|3      |  25         |  93          |
|---------------------|--------------|

.bar-block {
    margin: -5px 10px;
    color: black;
    padding: 5px;
    display: block;
    float: left;
    width: 75%;
    position: relative;
}
#bar-four {
    width: 0;
    background-color: #ADD633;
}
.bar {
    padding: 5px 0 0 0;
    margin: 2px;
    display: block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
<span class="bar-block" id="rating5">
 <span id="bar-four" class="bar" style="width: {%auto%}">
  <span style="">211</span>
 </span>
</span>

<span class="bar-block" id="rating3">
 <span id="bar-four" class="bar" style="width: {%auto%}">
  <span style="">126</span>
 </span>
</span>
                        

我创建了一个评分系统，要在其中创建进度条，如下图所示。但是我无法动态制作进度条宽度，该进度条宽度会根据诸如rate3 ...]等评级来显示进度

[通过PHP使用JS或输出样式：计算宽度百分比：currentRating * 100 / maxRating

$('.rating').change(function () {
  $('.progress').css({
      width: (($('.rating:checked').val() * 100) / 5) + '%'
  })
})

.progress {
  height: 5px;
  border-radius: 5px;
  background-color: blue;
  width: 0;
  transition: width 200ms ease-in-out;
}

.progress-bar {
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="rating">
  <label>
      <input type="radio" name="rating" class="rating" value="1"/> 1
  </label>
  <label>
      <input type="radio" name="rating" class="rating" value="2"/> 2
  </label>
  <label>
      <input type="radio" name="rating" class="rating" value="3"/> 3
  </label>
  <label>
      <input type="radio" name="rating" class="rating" value="4"/> 4
  </label>
  <label>
      <input type="radio" name="rating" class="rating" value="5"/> 5
  </label>
</div>

<div class="progress-bar">
  <div class="progress"></div>
</div>

Answer 1

$('.rating').change(function () {
  $('.progress').css({
      width: (($('.rating:checked').val() * 100) / 5) + '%'
  })
})