Mmeae a Wɔde Si Hɔ

Fa ho

Wobetumi de mmeae a wɔde nneɛma ahyɛ mu no 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.

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

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;