Placeholders

Utere loading placeholders pro componentibus vel paginis tuis ad aliquid indicandum adhuc onerandi.

In hac pagina

De

Placeholders uti possunt ad experientiam accessionis tuae augendae. Solum cum HTML et CSS aedificantur, significatione tibi non opus est ullis JavaScript ad eas creandis. Tu tamen aliqua consuetudine opus JavaScript ad visibilitatem suam toggle. Eorum species, color, et amplitudo facile apud nos usui generum nativus esse potest.

Exemplum

In exemplo infra, componente chartam typicam accipimus et eam recreamus cum applicatis ad "cardinem onerandum". Magnitudo ac proportiones eadem sunt inter utrumque.

Card titulum

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Ite somewhere

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

Quomodo facitur

Facere placeholders cum .placeholderclasse ac eget columnae classi (exempli gratia .col-6) ut ponatur width. Possunt textum inesse elementi reponere vel adici ut genus determinativum ad elementum existentem.

Applicamus etiam vocationem ad .btns via ::beforeut servetur ut heightservetur. Hoc exemplum in aliis adiunctis prout opus fuerit extendere potes, vel  intra elementum ad altitudinem reflexionis addere, cum textus actualis eius loco redditur.

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>

Usus aria-hidden="true"tantum indicat elementum occultum ad lectores protegendos. Mores onerandi locatoris pendent ex quo auctores stylis placeholder actu utantur, quomodo res renovandas instituunt, etc. Quidam JavaScript codicem opus esse potest ad statum placeholder permuto et AT utentes renovationis certiorem facere.

Latitudo

Mutare potes widthper euismod columnae classes, latitudines utilitates, seu stilos inlineos.

html

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

Color

Per defaltam placeholdervsus currentColor. Hoc in usu color vel utilitas classis opprimi potest.

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>

inspectionem

Magnitudo .placeholders stylo typographico parentis elementi innititur. Mos eas cum adiectivis inspectione : .placeholder-lg, .placeholder-sm, vel .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>

Animation

Animata placeholders, .placeholder-glowvel .placeholder-waveaptius deferat perceptionem rei actu onustae .

html

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

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

Sass

Variabilium

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