Hmun dahna tur

I component emaw page emaw loading placeholder hmang la, thil pakhat a la load thei tih hriattir rawh.

He page ah hian

Lam

Placeholder hmangin i application experience tihpun theih a ni. HTML leh CSS chauh hmanga siam an ni a, chu chu siam nan JavaScript i mamawh lo tihna a ni. Mahse, an hmuh theihna toggle tur chuan custom JavaScript engemaw zat i mamawh ang. An hmel, an rawng leh an size te hi awlsam takin kan utility class te hmang hian kan siam danglam thei a ni.

Entirna

A hnuaia entirnan hian typical card component kan la a, placeholder hmangin “loading card” kan siam leh a. Size leh proportion hi an pahnih inkarah hian a inang vek a ni.

Card hming chu a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Khawi emaw laiah kal rawh

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

A hnathawh dan

.placeholderClass leh grid column class (eg, .col-6) hmangin placeholder siam la , width. Element chhunga text awm chu an thlak thei a, component awm tawhah modifier class angin an dah thei bawk.

Kan zah theih nan .btns via ah hian additional styling kan hmang bawk . He pattern hi a tul angin dinhmun dang atan i tizau thei a, a aiah text tak tak render a nih hunah a san zawng lantir turin element chhungah a dah belh thei bawk.::beforeheight 

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

A hman hian aria-hidden="true"screen reader-te tan element chu thup tur a ni tih chauh a tarlang. Placeholder loading behavior chu ziaktute’n placeholder style an hman tak tak dan tur te, thil update an tum dan te, etc. ah te a innghat a, JavaScript code thenkhat chu placeholder dinhmun swap nan leh AT hmangtute hnena update hriattir nan a ngai mai thei.

Vang

widthThrough grid column class te, width utilities te, inline style te pawh i thlak thei bawk.

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

Rawng

Default-ah chuan, a placeholderhmang currentColor. Hei hi custom color emaw utility class emaw hmangin override theih a ni.

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

S size hi .placeholderparent element typographic style atanga chhut a ni. Sizing modifier hmangin customize rawh: .placeholder-lg, .placeholder-sm, emaw .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 hmanga siam a ni

Thil pakhat active taka load a nih thu hriatna chu a tha zawka thlen theih nan .placeholder-glowemaw placeholder te chu animate rawh ..placeholder-wave

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

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

Sass a ni

Variables te pawh a awm

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