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

ꯃꯔꯝꯗꯤ

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

ꯈꯨꯗꯝ

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

<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ꯏꯀꯥꯌꯈꯨꯝꯅꯕꯥ ꯎꯠꯂꯤ꯫ ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯇꯣꯞꯄꯥ ꯐꯤꯚꯃꯁꯤꯡꯒꯤꯗꯃꯛ ꯄꯦꯇꯔꯟ ꯑꯁꯤ ꯁꯥꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ, ꯅꯠꯠꯔꯒꯥ  ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯇꯁꯦꯡꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯋꯥꯡꯕꯥ ꯑꯗꯨ ꯔꯤꯐ꯭ꯂꯦꯛꯇ ꯇꯧꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ꯫

<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>

ꯄꯥꯛꯄ

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;