Tagata fa'amautu

E uiga i

E mafai ona fa'aoga nofoaga e fa'aleleia ai le poto masani o lau talosaga. E na'o le HTML ma le CSS e fausia, o lona uiga e te le mana'omia so'o se Javascript e fai ai. Ae ui i lea, e te manaʻomia se JavaScript masani e sui ai lo latou vaʻaia. O latou foliga vaaia, lanu, ma le lapopoa e mafai ona faigofie ona faʻavasegaina ma a tatou vasega aoga.

Faataitaiga

I le faʻataʻitaʻiga o loʻo i lalo, matou te ave se mea masani pepa ma toe faʻapipiʻi ma faʻaoga faʻapipiʻi e faʻapipiʻi se "pepa uta". Ole lapo'a ma fa'atatau e tutusa i le va o le lua.

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

E faapefea ona galue

Fausia mea fa'apipi'i i le .placeholdervasega ma se vasega koluma laina (fa'ata'ita'iga, .col-6) e seti ai le width. E mafai ona latou suia le tusitusiga i totonu o se elemene poʻo le faʻaopoopoina o se vasega suiga i se vaega o loʻo iai.

Matou te fa'aogaina sitaili fa'aopoopo i .btnle s via ::beforeina ia mautinoa o heightlo'o fa'aaloalogia. E mafai ona e fa'alautele lenei mamanu mo isi tulaga pe a mana'omia, pe fa'aopoopo se  i totonu o le elemene e atagia ai le maualuga pe a tu'uina atu tusitusiga moni i lona tulaga.

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

Lautele

E mafai ona e suia widthvasega laina laina laina, fa'aoga lautele, po'o sitaili laina.

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

Lanu

Ona o le faaletonu, o le placeholderfaaaogaina currentColor. E mafai ona suitulaga i se lanu masani poʻo se vasega aoga.

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

Tele

Ole tele ole .placeholders e fa'avae ile faiga fa'akomipiuta ole elemene matua. Fa'asinomaga i latou fa'aopoopo fa'avasega: .placeholder-lg, .placeholder-sm, po'o .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>

Fa'afiafiaga

Fa'aola tagata fa'apipi'i fa'atasi ma .placeholder-glowpe .placeholder-wavefa'aleleia atili le fa'ailoaina atu o se mea o lo'o fa'atumuina malosi.

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

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

Sass

Fuafuaga

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