Source

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

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

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

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

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

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

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

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

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

ꯂꯦꯕꯦꯂꯁꯤꯡ꯫

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

꯲꯵% ꯑꯣꯏꯈꯤ꯫
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

ꯑꯋꯥꯡꯕ

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

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" 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" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

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

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

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" 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" 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" 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" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

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

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

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

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

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

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" 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" 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" 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" 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" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

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

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

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