in English

ꯁ꯭ꯄꯤꯅꯥꯔꯁꯤꯡ꯫

HTML, CSS, ꯑꯃꯁꯨꯡ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯕꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯦꯝꯕꯥ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯁ꯭ꯄꯤꯅꯥꯔꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯅꯠꯠꯔꯒꯥ ꯄꯦꯖ ꯑꯃꯒꯤ ꯂꯣꯗ ꯇꯧꯕꯒꯤ ꯐꯤꯚꯝ ꯑꯗꯨ ꯇꯥꯀꯎ.

ꯃꯔꯝꯗꯤ

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ “ꯁ꯭ꯄꯤꯅꯥꯔꯁꯤꯡ” ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯁꯤꯡꯗꯥ ꯂꯣꯗꯤꯡ ꯁ꯭ꯇꯦꯠ ꯑꯗꯨ ꯎꯠꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ HTML ꯑꯃꯁꯨꯡ CSS ꯈꯛꯇꯅꯥ ꯁꯥꯕꯅꯤ, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯃꯈꯣꯌ ꯑꯁꯤ ꯁꯦꯝꯅꯕꯒꯤꯗꯃꯛ ꯅꯍꯥꯛꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯃꯠꯇꯥ ꯃꯊꯧ ꯇꯥꯗꯦ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯃꯈꯣꯌꯒꯤ ꯚꯤꯖꯤꯕꯤꯂꯤꯇꯤ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯈꯔꯥ ꯃꯊꯧ ꯇꯥꯒꯅꯤ꯫ ꯃꯈꯣꯌꯒꯤ ꯃꯑꯣꯡ ꯃꯇꯧ, ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ, ꯑꯃꯁꯨꯡ ꯁꯥꯏꯖ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯉꯀꯄꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯐꯖꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤꯒꯤ ꯄꯥꯟꯗꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ, ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯂꯣꯗꯔ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯌꯥꯑꯣꯔꯤ role="status"ꯑꯃꯁꯨꯡ ꯅꯦꯁ꯭ꯇꯦꯗ <span class="sr-only">Loading...</span>.

ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤꯒꯤ ꯑꯦꯅꯤꯃꯦꯁꯟ ꯏꯐꯦꯛꯇ ꯑꯁꯤ prefers-reduced-motionꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯗꯣꯀꯨꯃꯦꯟꯇꯦꯁꯅꯒꯤ ꯍꯟꯊꯔꯀꯄꯥ ꯃꯣꯁꯟ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ .

ꯕꯣꯔꯗꯔ ꯁ꯭ꯄꯤꯅꯥꯔ ꯑꯣꯏꯕꯥ꯫

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

ꯂꯣꯗ ꯇꯧꯔꯤ...
<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

ꯃꯆꯨꯁꯤꯡ꯫

ꯕꯣꯔꯗꯔ ꯁ꯭ꯄꯤꯅꯥꯔꯅꯥ currentColorꯃꯁꯤꯒꯤꯗꯃꯛꯇꯥ ꯁꯤꯖꯤꯟꯅꯩ , ꯃꯁꯤꯒꯤ border-colorꯑꯔꯊꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯇꯦꯛꯁꯠ ꯃꯆꯨꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯆꯨ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ . ꯑꯗꯣꯝꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯇꯦꯛꯁꯠ ꯀꯂꯔ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯁ꯭ꯄꯤꯅꯥꯔꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫

ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>
border-colorꯀꯔꯤꯒꯤꯗꯃꯛ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤꯕꯅꯣ ? ꯕꯣꯔꯗꯔ ꯁ꯭ꯄꯤꯅꯥꯔ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ transparentꯌꯥꯃꯗ꯭ꯔꯕꯗꯥ ꯁꯥꯏꯗ ꯑꯃꯒꯤꯗꯃꯛ ꯕꯣꯔꯗꯔ ꯑꯃꯥ ꯁꯦꯝꯃꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ .border-{color}ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯅꯥ ꯃꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯒꯅꯤ꯫

ꯍꯦꯅꯒꯠꯂꯛꯂꯤꯕꯥ ꯁ꯭ꯄꯤꯅꯥꯔ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯕꯣꯔꯗꯔ ꯁ꯭ꯄꯤꯅꯥꯔ ꯑꯃꯥ ꯐꯦꯟꯁꯤꯡ ꯇꯧꯗ꯭ꯔꯕꯗꯤ, ꯒ꯭ꯔꯣ ꯁ꯭ꯄꯤꯅꯥꯔ ꯑꯗꯨꯗꯥ ꯍꯣꯡꯗꯣꯀꯎ꯫ ꯇꯦꯛꯅꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯄꯤꯟ ꯇꯧꯗ꯭ꯔꯤꯉꯩꯗꯥ, ꯃꯁꯤ ꯍꯟꯖꯤꯟ ꯍꯟꯖꯤꯟ ꯍꯦꯅꯒꯠꯂꯀꯏ!

ꯂꯣꯗ ꯇꯧꯔꯤ...
<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

ꯑꯃꯨꯛ ꯍꯟꯅꯥ , ꯁ꯭ꯄꯤꯅꯥꯔ currentColorꯑꯁꯤ . ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯃꯁꯤ ꯕ꯭ꯂꯨꯗꯥ ꯂꯩ, ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤꯕꯥ ꯚꯦꯔꯤꯑꯦꯟꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>

ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯁ꯭ꯄꯤꯅꯥꯔꯁꯤꯡ ꯑꯁꯤ rems, currentColor, ꯑꯃꯁꯨꯡ display: inline-flex. ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯃꯈꯣꯌ ꯑꯁꯤ ꯐꯖꯅꯥ ꯁꯥꯏꯖ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯃꯆꯨ ꯁꯪꯍꯅꯕꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯊꯨꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯄꯟꯈꯩ

ꯐꯖꯅꯥ ꯁ꯭ꯄꯦꯁꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛꯇꯥꯒꯨꯝꯕꯥ ꯃꯥꯔꯖꯤꯟ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫.m-5

ꯂꯣꯗ ꯇꯧꯔꯤ...
<div class="spinner-border m-5" role="status">
  <span class="sr-only">Loading...</span>
</div>

ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

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

ꯊꯦꯛ ꯀꯣꯟꯕ ꯌꯥꯕ

ꯂꯣꯗ ꯇꯧꯔꯤ...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
ꯂꯣꯗ ꯇꯧꯔꯤ...
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

ꯐ꯭ꯂꯣꯠ ꯇꯧꯏ꯫

ꯂꯣꯗ ꯇꯧꯔꯤ...
<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

ꯇꯦꯛꯁꯠ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

ꯂꯣꯗ ꯇꯧꯔꯤ...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

ꯆꯥꯎꯕꯒꯤ ꯆꯥꯡ

ꯍꯥꯄꯆꯤꯅꯕꯥ .spinner-border-smꯑꯃꯁꯨꯡ .spinner-grow-smꯑꯇꯣꯞꯄꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯨꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯁ꯭ꯄꯤꯅꯥꯔ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ꯫

ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

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

ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>

ꯕꯇꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

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

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>