Как установить максимальную загрузку прогрессбара 300?

Question

В настоящее время я делаю индикатор выполнения с максимальным значением 300, но я не знаю, как установить максимальное значение 300.В настоящее время он работает для максимального значения 100, но я хочу, чтобы оно было 300.

Я пробовал это:

<div class="mt-3 progress"><div class="progress-striped active" role="progressbar" value="80" aria-valuemin="0" aria-valuemax="300" style="width:80px"></div>

Может кто-нибудь помочь мне из этого, пожалуйста?

Answer 1

Невозможно назначить максимальное значение с индикатором выполнения Bootstrap4;который на самом деле просто div с применением стиля к нему.Таким образом, мы можем присвоить (80/300), который равен 26,6 в качестве ширины индикатора выполнения bootstrap-4;

Это возможно с индикатором выполнения HTML, как показано ниже;

progress {
  color: lightblue;
}

progress {
  border: none;
  width: 100%;
  background: crimson;
}

progress::-webkit-progress-value {
  background: lightblue;
}

progress::-moz-progress-bar {
  background: lightcolor;
}

progress::-webkit-progress-value {
  background: orange;
}

progress::-webkit-progress-bar {
  background: lightgray;
}

.progress .progress-bar {
  background: orange;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <h2>Bootstrap4 - Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar" value='80' style="width:26.6%">80 out of 300</div>
  </div>

  <hr/>

  <h2>Default HTML progress bar</h2>
  <progress value="80" max="300"> </progress>
</div>

ОБНОВЛЕНИЕ : обновлен цвет фона для обоих индикаторов выполнения