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

ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔꯁꯤꯡ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯈꯔꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯂꯣꯗ ꯇꯧꯕꯥ ꯌꯥꯏ ꯍꯥꯌꯕꯥ ꯇꯥꯛꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯄꯦꯖꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯂꯣꯗ ꯇꯧꯔꯤꯕꯥ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ.

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

ꯃꯔꯝꯗꯤ

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

ꯈꯨꯗꯝ

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

Placeholder
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫ 
<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

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

.placeholderꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯁꯨꯡ ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯝ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .col-6) ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔꯁꯤꯡ widthꯁꯦꯝꯃꯨ꯫ ꯃꯈꯣꯌꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯃꯍꯨꯠ ꯁꯤꯅꯕꯥ ꯌꯥꯏ ꯅꯠꯠꯔꯒꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯗꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ꯫

.btnꯑꯩꯈꯣꯌꯅꯥ ꯑꯦꯁ ꯚꯤꯌꯥꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ ::beforeꯃꯗꯨꯅꯥ ꯁꯣꯏꯗꯅꯥ heightꯏꯀꯥꯌꯈꯨꯝꯅꯕꯥ ꯎꯠꯂꯤ꯫ ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯇꯣꯞꯄꯥ ꯐꯤꯚꯃꯁꯤꯡꯒꯤꯗꯃꯛ ꯄꯦꯇꯔꯟ ꯑꯁꯤ ꯁꯥꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ, ꯅꯠꯠꯔꯒꯥ &nbsp;ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯇꯁꯦꯡꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯋꯥꯡꯕꯥ ꯑꯗꯨ ꯔꯤꯐ꯭ꯂꯦꯛꯇ ꯇꯧꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ꯫

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
ꯁꯤꯖꯤꯟꯅꯕꯅꯥ aria-hidden="true"ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯗꯥ ꯂꯣꯠꯁꯤꯅꯒꯗꯕꯅꯤ ꯍꯥꯌꯕꯁꯤ ꯈꯛꯇꯃꯛ ꯇꯥꯀꯏ꯫ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔꯒꯤ ꯂꯣꯗꯤꯡ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯑꯁꯤ ꯑꯣꯊꯣꯔꯤꯇꯤꯁꯤꯡꯅꯥ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔꯒꯤ ꯃꯑꯣꯡꯁꯤꯡ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯇꯁꯦꯡꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ, ꯃꯈꯣꯌꯅꯥ ꯄꯣꯠꯁꯤꯡ ꯀꯔꯝꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯅꯕꯥ ꯊꯧꯔꯥꯡ ꯇꯧꯔꯤꯕꯒꯦ, ꯑꯁꯤꯅꯆꯤꯡꯕꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯒꯅꯤ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔꯒꯤ ꯐꯤꯚꯝ ꯑꯗꯨ ꯁꯣꯞ ꯇꯧꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦ.ꯇꯤ.

ꯄꯥꯛꯄ

widthꯅꯍꯥꯛꯅꯥ ꯊ꯭ꯔꯨ ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡ, ꯋꯥꯏꯗ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ, ꯅꯠꯠꯔꯒꯥ ꯏꯅꯂꯥꯏꯟ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ꯫

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

ꯝꯆꯨ

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, placeholderꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ currentColor. ꯃꯁꯤ ꯀꯁ꯭ꯇꯝ ꯃꯆꯨ ꯅꯠꯠꯔꯒꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

<span class="placeholder col-12"></span>

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

ꯁꯥꯏꯖ ꯇꯧꯕꯥ꯫

s ꯒꯤ ꯁꯥꯏꯖ ꯑꯁꯤ .placeholderꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤꯛ ꯁ꯭ꯇꯥꯏꯂꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏ꯫ ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯏꯖ ꯃꯣꯗꯤꯐꯥꯏꯌꯔꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯤꯌꯨ: .placeholder-lg, .placeholder-sm, ꯅꯠꯔꯒꯥ .placeholder-xs.

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

ꯑꯦꯅꯤꯃꯦꯁꯟ ꯇꯧꯕꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯄꯣꯠꯁꯛ ꯑꯃꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯅꯥ ꯂꯣꯗ ꯇꯧꯕꯒꯤ ꯋꯥꯈꯜꯂꯣꯟ .placeholder-glowꯑꯗꯨ .placeholder-waveꯍꯦꯟꯅꯥ ꯐꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯐꯣꯡꯗꯣꯛꯅꯕꯥ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔꯁꯤꯡ ꯑꯦꯅꯤꯃꯦꯠ ꯇꯧꯕꯥ꯫

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

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

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;