Di wan dɛn we de kip di ples

Bɔt

Yu kin yuz ples dɛn fɔ mek yu aplikeshɔn gɛt mɔ ɛkspiriɛns. Na HTML ɛn CSS nɔmɔ dɛn bil dɛn, we min se yu nɔ nid ɛni JavaSkript fɔ mek dɛn. Bɔt yu go nid sɔm kɔstɔm JavaSkript fɔ chenj di we aw dɛn de si dɛn. Dɛn kin luk, kɔlɔ, ɛn sayz kin izi fɔ kɔstɔmayt wit wi yutiliti klas dɛn.

Ɛgzampul

Insay di ɛgzampul we de dɔŋ ya, wi tek wan tipik kad kɔmpɔnɛnt ɛn mek am bak wit pleshɔlda dɛn we dɛn aplay fɔ mek wan “lod kad”. Sayz ɛn di prɔpɔshɔn na di sem bitwin dɛn tu.

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

Aw i de wok

Krio pleshɔlda wit di .placeholderklas ɛn wan grid kɔlɔm klas (ɛgz., .col-6) fɔ sɛt di width. Dɛn kin riples di tɛks insay wan ɛlimɛnt ɔ dɛn kin ad dɛn as modifya klas to wan kɔmpɔnɛnt we dɔn de.

Wi de aplay adishɔnal stayl to .btns via ::beforefɔ mek shɔ se heightdɛn rɛspɛkt di. Yu kin ɛkstɛnd dis patɛn fɔ ɔda sityueshɔn dɛn as nid de, ɔ ad wan  insay di ɛlimɛnt fɔ sho di ayt we dɛn rɛnd di aktual tɛks insay in ples.

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

Wayd

Yu kin chenj di widthtru grid kɔlɔm klas dɛn, wit yutiliti dɛn, ɔ inlayn stayl dɛn.

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

Kɔlɔ

Bay difɔlt, di placeholderyuz currentColordɛn . Dis kin ɔvalayz wit kɔstɔm kɔlɔ ɔ yutiliti klas.

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

Sayz fɔ di sayz

Di sayz fɔ .placeholders de bays pan di taypografik stayl fɔ di mama ɛn papa ɛlimɛnt. Kastamayz dɛn wit sayzin modifya dɛn: .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>

Animɛshɔn we dɛn mek

Animate plesholda wit .placeholder-glowɔ .placeholder-wavefɔ bɛtɛ kɔnvɛy di persepshɔn fɔ sɔntin we dɛn de aktiv wan lod.

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

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

Sass bin de

Di tin dɛn we kin chenj

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