Dalfannau

Defnyddiwch ddalfannau llwytho ar gyfer eich cydrannau neu dudalennau i ddangos y gallai rhywbeth fod yn dal i lwytho.

Ar y dudalen hon

Ynghylch

Gellir defnyddio deiliaid lleoedd i wella profiad eich cais. Maent wedi'u hadeiladu gyda HTML a CSS yn unig, sy'n golygu nad oes angen unrhyw JavaScript arnoch i'w creu. Fodd bynnag, bydd angen rhywfaint o JavaScript personol arnoch i newid eu gwelededd. Gellir addasu eu hymddangosiad, lliw a maint yn hawdd gyda'n dosbarthiadau cyfleustodau.

Enghraifft

Yn yr enghraifft isod, rydym yn cymryd cydran cerdyn nodweddiadol ac yn ei hail-greu gyda dalfannau wedi'u cymhwyso i greu "cerdyn llwytho". Mae maint a chyfrannau'r un peth rhwng y ddau.

Teitl y cerdyn

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Ewch i rywle

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

Sut mae'n gweithio

Creu dalfannau gyda'r .placeholderdosbarth a dosbarth colofn grid (ee, .col-6) i osod y width. Gallant ddisodli'r testun y tu mewn i elfen neu eu hychwanegu fel dosbarth addasydd i gydran sy'n bodoli eisoes.

Rydym yn defnyddio steilio ychwanegol i .btns via ::beforeer mwyn sicrhau y heightcaiff ei barchu. Gallwch ymestyn y patrwm hwn ar gyfer sefyllfaoedd eraill yn ôl yr angen, neu ychwanegu o  fewn yr elfen i adlewyrchu'r uchder pan fydd y testun gwirioneddol yn cael ei rendro yn ei le.

html

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

Mae defnyddio aria-hidden="true"dim ond yn nodi y dylai'r elfen gael ei chuddio i ddarllenwyr sgrin. Mae ymddygiad llwytho'r dalfan yn dibynnu ar sut y bydd awduron yn defnyddio'r arddulliau dalfan mewn gwirionedd, sut maent yn bwriadu diweddaru pethau, ac ati Efallai y bydd angen rhywfaint o god JavaScript i gyfnewid cyflwr y dalfan a hysbysu defnyddwyr AT am y diweddariad.

Lled

Gallwch newid y widthdosbarthiadau colofn grid drwodd, cyfleustodau lled, neu arddulliau mewn-lein.

html

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

Lliw

Yn ddiofyn, mae'r placeholderdefnyddiau currentColor. Gellir diystyru hyn gyda lliw arferol neu ddosbarth cyfleustodau.

html

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

Maintioli

Mae maint .placeholders yn seiliedig ar arddull teipograffeg y rhiant elfen. Addaswch nhw gydag addaswyr maint: .placeholder-lg, .placeholder-sm, neu .placeholder-xs.

html

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

Animeiddiad

Animeiddio deiliaid lleoedd gyda .placeholder-glowneu .placeholder-wavei gyfleu'n well y canfyddiad bod rhywbeth yn cael ei lwytho'n weithredol .

html

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

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

Sass

Newidynnau

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