Legen Sie einen benutzerdefinierten Bereich für den Fortschrittsbalken fest

Question

Mein Fortschrittsbalken wird jetzt in Prozent angezeigt. Ich möchte es von % auf Bereichsskala ändern.

Minuten: 0 Maximal: 10

Dies gilt für %:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="progress">
  <div id="test" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
</div>

Aber ich möchte es von % in den Wertebereich ändern.

##Update

Dinge mit Arienwert funktionieren nicht. Ich weiß nicht, warum.

Ich habe eine Lösung gefunden und den Prozentsatz anhand meiner Antworten berechnet:

var calculations = data[1] / 10 * 100

Answer 1

您可以将 style="width: 100%" 更改为您想要的任何％，这不是条形的％，而是内部蓝色条形的宽度。看来您正在使用 Bootstrap。您可以在此处阅读有关此进度条的信息： https://getbootstrap.com/docs/5.1/组件/进度/

您还可以为您的栏提供 aria 属性，您可以为其提供最小值和最大值。 （也可以在上面的链接中看到）

例如：aria-valuenow="0" aria-valuemin="0" aria-valuemax="10"

.progress{
  width: 300px;
  margin: 20px;
}

aria 值的示例（从 Bootstrap 文档复制）：

.progress{
  margin: 20px;
  width: 300px;
}