Mmeae a Wɔde Si Hɔ

Fa loading placeholders ma wo components anaa pages no di dwuma de kyerɛ sɛ ebia biribi da so ara reload.

Wɔ kratafa yi so

Fa ho

Wobetumi de mmeae a wɔde nneɛma gu mu adi dwuma de ama wo application no mu osuahu ayɛ kɛse. Wɔde HTML ne CSS nkutoo na ɛkyekye, a ɛkyerɛ sɛ wunhia JavaScript biara na wode ayɛ. Nanso, wubehia JavaScript bi a wɔahyɛ da ayɛ de ayɛ nsakrae wɔ wɔn a wotumi hu no mu. Wɔn hwɛbea, wɔn kɔla, ne wɔn kɛse betumi ayɛ mmerɛw denam yɛn utility adesua ahorow no so.

Nhwɛsoɔ

Wɔ nhwɛsoɔ a ɛwɔ aseɛ ha yi mu no, yɛfa kaad no fã bi a ɛtaa ba na yɛsan yɛ no de beaeɛ a wɔde ahyɛ mu de yɛ “loading card”. Ne kɛse ne ne nsusuwii yɛ pɛ wɔ abien no ntam.

Kaad no asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Kɔ baabi

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

Sɛnea ɛyɛ adwuma

Yɛ beaeɛ a ɛwɔ .placeholderadesua no ne grid kɔla adesua (sɛ nhwɛsoɔ no, .col-6) de hyehyɛ width. Wobetumi de nsɛm a ɛwɔ element bi mu no asi ananmu anaasɛ wɔde aka ho sɛ modifier class wɔ component bi a ɛwɔ hɔ dedaw no ho.

Yɛde styling foforo di dwuma wɔ .btns via so ::beforede hwɛ hu sɛ heightwobu no. Wubetumi atrɛw saa nhyehyɛe yi mu ama tebea afoforo sɛnea ɛho hia, anaasɛ wode bi aka  element no mu de akyerɛ ɔsorokɔ bere a wɔrekyerɛ nsɛm ankasa ase wɔ n’ananmu no.

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

Sɛ wɔde di dwuma aria-hidden="true"nkutoo a, ɛkyerɛ sɛ ɛsɛ sɛ wɔde element no sie ma screen akenkanfo. Beaeɛ no loading suban no gyina sɛdeɛ akyerɛwfoɔ de beaeɛ no kwan ahodoɔ no bedi dwuma ankasa, sɛdeɛ wɔayɛ nhyehyɛeɛ sɛ wɔbɛsesa nneɛma, ne nea ɛkeka ho Ebia JavaScript koodu bi ho bɛhia na wɔde sesa beaeɛ no tebea na wɔabɔ AT dwumadiefoɔ amanneɛ wɔ update no ho.

Ntrɛmu

Wubetumi asesa widththrough grid column classes, width utilities, anaa inline styles no.

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

Ahosuo

Sɛnea wɔahyɛ no, nea wɔde placeholderdi dwuma currentColorno . Wobetumi de kɔla a wɔahyɛ da ayɛ anaa utility class abɔ eyi so.

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

Sizing a wɔde yɛ nneɛma

S no kɛse .placeholdergyina ɔwofo element no typographic style so. Fa sizing modifiers yɛ wɔn sɛnea wopɛ: .placeholder-lg, .placeholder-sm, anaa .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>

Animation a wɔde yɛ nneɛma

Ma mmeae a wɔde nneɛma gu mu no nya nkwa .placeholder-glowanaasɛ .placeholder-wavesɛnea ɛbɛyɛ a wobɛda adwene a ɛne sɛ wɔde biribi rehyɛ mu denneennen no adi yiye.

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

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

Sass

Nneɛma a Ɛsakra

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