in English

ꯈꯨꯃꯥꯡ ꯆꯥꯎꯁꯤꯟꯕ

ꯁ꯭ꯇꯦꯛ ꯇꯧꯔꯕꯥ ꯕꯥꯔꯁꯤꯡ, ꯑꯦꯅꯤꯃꯦꯇꯦꯗ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯇꯦꯛꯁꯠ ꯂꯦꯕꯦꯂꯁꯤꯡꯒꯤ ꯁꯄꯣꯔꯠ ꯌꯥꯎꯕꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯀꯁ꯭ꯇꯝ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯅꯕꯒꯤ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ HTML ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯅꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯃꯒꯠꯂꯤ, ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯑꯩꯈꯣꯌꯅꯥ HTML5 <progress>ꯑꯦꯂꯤꯃꯦꯟꯇ ꯁꯤꯖꯤꯟꯅꯗꯦ , ꯅꯍꯥꯛꯅꯥ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡ ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯃꯈꯣꯌꯕꯨ ꯑꯦꯅꯤꯃꯦꯠ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯒꯤ ꯃꯊꯛꯇꯥ ꯇꯦꯛꯁꯠ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯊꯝꯕꯥ ꯌꯥꯏ ꯍꯥꯌꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯈꯪꯍꯜꯂꯤ꯫

ꯑꯩꯈꯣꯌꯅꯥ .progressꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯒꯤ ꯃꯦꯛꯁ ꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯔꯦꯄꯔ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
ꯑꯩꯈꯣꯌꯅꯥ .progress-barꯍꯧꯖꯤꯛ ꯐꯥꯑꯣꯕꯒꯤ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯑꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯏꯅꯔꯖꯤ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯩ꯫
ꯃꯈꯣꯌꯒꯤ ꯄꯥꯛ .progress-barꯆꯥꯎꯕꯥ ꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯏꯅꯂꯥꯏꯟ ꯁ꯭ꯇꯥꯏꯜ, ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ, ꯅꯠꯠꯔꯒꯥ ꯀꯁ꯭ꯇꯝ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.
.progress-barꯃꯁꯤꯅꯥ ꯃꯁꯤꯕꯨ ꯑꯦꯛꯁꯦꯁꯤꯕꯜ ꯑꯣꯏꯍꯟꯅꯕꯥ ꯈꯔꯥ roleꯑꯃꯁꯨꯡ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯁꯨ ꯃꯊꯧ ꯇꯥꯏ aria, ꯃꯁꯤꯗꯥ ꯑꯦꯛꯁꯦꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯃꯤꯡ ꯑꯃꯥ ( aria-label, aria-labelledby, ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ) ꯌꯥꯑꯣꯔꯤ꯫

ꯃꯗꯨ ꯄꯨꯝꯅꯃꯛ ꯄꯨꯟꯅꯥ ꯊꯝꯃꯨ, ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯃꯁꯤꯡ ꯑꯁꯤ ꯑꯗꯣꯃꯒꯤ ꯃꯐꯃꯗꯥ ꯂꯩꯔꯤ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯋꯥꯏꯗ ꯁꯦꯠ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯃꯁꯤꯡ ꯈꯔꯥ ꯄꯤꯔꯤ . ꯅꯍꯥꯛꯀꯤ ꯗꯔꯀꯥꯔ ꯑꯣꯏꯕꯁꯤꯡꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯑꯗꯨ ꯊꯨꯅꯥ ꯀꯅꯐꯤꯒꯔ ꯇꯧꯕꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯕꯥ ꯌꯥꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ꯂꯦꯕꯦꯂꯁꯤꯡ꯫

ꯃꯅꯨꯡꯗꯥ ꯇꯦꯛꯁꯠ ꯊꯃꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡꯗꯥ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ .progress-bar.

꯲꯵% ꯑꯣꯏꯈꯤ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Example with label" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

ꯑꯋꯥꯡꯕ

ꯑꯩꯈꯣꯌꯅꯥ heightꯚꯦꯜꯌꯨ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯁꯦꯠ ꯇꯧꯏ .progress, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯛꯂꯕꯗꯤ ꯏꯅꯔꯖꯤ .progress-barꯑꯗꯨ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯁꯥꯏꯖ ꯍꯣꯡꯗꯣꯛꯀꯅꯤ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗꯁꯤꯡ꯫

ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡꯒꯤ ꯃꯑꯣꯡ ꯃꯇꯧ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" aria-label="Info example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" aria-label="Warning example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯑꯔꯊ ꯄꯤꯕꯥ꯫

ꯑꯔꯊ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯃꯆꯨ ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯏꯟꯗꯤꯀꯦꯁꯟ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯄꯤꯔꯤ, ꯃꯁꯤ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ – ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯒꯨꯝꯕꯥ – ꯌꯧꯍꯅꯕꯥ ꯉꯝꯂꯣꯏ꯫ .visually-hiddenꯃꯆꯨ ꯑꯗꯨꯅꯥ ꯇꯥꯀꯄꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯗꯨ ꯀꯟꯇꯦꯟꯇ ꯃꯁꯥꯃꯛꯇꯒꯤ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯎꯕꯥ ꯐꯪꯂꯤꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯗꯨꯗꯒꯤ) ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯎꯕꯥ ꯐꯪꯏ ꯍꯥꯌꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯈꯪꯗꯣꯀꯎ, ꯅꯠꯠꯔꯒꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯇꯦꯛꯁꯇꯒꯨꯝꯕꯥ ꯑꯂꯇꯔꯅꯦꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯄꯥꯝꯕꯩꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯌꯥꯎꯍꯅꯕꯥ꯫

ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯕꯥꯔꯁꯤꯡ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯗꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯧꯕꯥ꯫

ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯒꯤ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯃꯆꯨꯒꯤ ꯃꯊꯛꯇꯥ CSS ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁ꯭ꯠꯔꯥꯏꯞ ꯑꯃꯥ ꯑꯦꯞꯂꯥꯏ .progress-bar-stripedꯇꯧꯅꯕꯥ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.progress-bar

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-label="Success striped example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-label="Info striped example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-label="Warning striped example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ꯑꯦꯅꯤꯃꯦꯇꯦꯗ ꯁ꯭ꯠꯔꯥꯏꯄꯁꯤꯡ꯫

ꯁ꯭ꯠꯔꯥꯏꯞ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯁꯤꯁꯨ ꯑꯦꯅꯤꯃꯦꯇꯦꯗ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ CSS3 ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁ꯭ꯠꯔꯥꯏꯄꯁꯤꯡ ꯑꯗꯨ ꯑꯔꯣꯏꯕꯥ ꯐꯥꯑꯣꯕꯥ ꯑꯦꯅꯤꯃꯦꯠ .progress-bar-animatedꯇꯧꯅꯕꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.progress-bar

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

v5.2.0ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯍꯦꯅꯒꯠꯂꯛꯂꯤꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯑꯦꯞꯔꯣꯆꯀꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ, ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡꯅꯥ ꯍꯧꯖꯤꯛꯇꯤ .progressꯍꯦꯟꯅꯥ ꯐꯕꯥ ꯔꯤꯑꯦꯜ-ꯇꯥꯏꯝ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟꯒꯤꯗꯃꯛ ꯂꯣꯀꯦꯜ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯁꯥꯁ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤ, ꯃꯁꯤꯁꯨ꯫

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

ꯀꯤꯐ꯭ꯔꯦꯃꯁꯤꯡ꯫

ꯒꯤꯗꯃꯛ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡ ꯁꯦꯝꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯩ .progress-bar-animated. ꯌꯥꯑꯣꯔꯤꯕꯁꯤꯡ ꯑꯗꯨꯗꯤ scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}