ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
Check
in English

ꯁ꯭ꯄꯤꯅꯥꯔꯁꯤꯡ꯫

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

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

ꯃꯔꯝꯗꯤ

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

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

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

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

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ꯃꯆꯨꯁꯤꯡ꯫

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

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

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

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

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

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

ꯄꯟꯈꯩ

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

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

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

ꯊꯦꯛ ꯀꯣꯟꯕ ꯌꯥꯕ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
ꯂꯣꯗ ꯇꯧꯔꯤ...
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

ꯐ꯭ꯂꯣꯠ ꯇꯧꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

ꯆꯥꯎꯕꯒꯤ ꯆꯥꯡ

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

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

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">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>
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">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>

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

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

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

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

ꯕꯣꯔꯗꯔ ꯁ꯭ꯄꯤꯅꯥꯔ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ: ꯱.

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

ꯍꯦꯅꯒꯠꯂꯛꯂꯤꯕꯥ ꯁ꯭ꯄꯤꯅꯥꯔ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ: ꯱.

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

ꯁ꯭ꯄꯤꯅꯥꯔ ꯑꯅꯤꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ, ꯑꯄꯤꯀꯄꯥ ꯁ꯭ꯄꯤꯅꯥꯔ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯄꯗꯦꯠ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .spinner-border-smꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯊꯕꯀꯁꯤꯡ ꯑꯁꯤ ꯇꯧꯏ:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

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

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

ꯀꯤꯐ꯭ꯔꯦꯃꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯁ꯭ꯄꯤꯅꯔꯁꯤꯡꯒꯤꯗꯃꯛ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡ ꯁꯦꯝꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯌꯥꯑꯣꯔꯤꯕꯁꯤꯡ ꯑꯗꯨꯗꯤ scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}