Местоносители

Користете локали за вчитување за вашите компоненти или страници за да покажете дека нешто сè уште се вчитува.

На оваа страница

За

Местата може да се користат за подобрување на искуството на вашата апликација. Тие се изградени само со HTML и CSS, што значи дека не ви треба JavaScript за да ги креирате. Сепак, ќе ви треба прилагоден JavaScript за да ја вклучите нивната видливост. Нивниот изглед, боја и големина може лесно да се приспособат со нашите класи за комунални услуги.

Пример

Во примерот подолу, земаме типична компонента на картичката и ја рекреираме со применети заштитници за да се создаде „картичка за вчитување“. Големината и пропорциите се исти меѓу двете.

Наслов на картичката

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Оди некаде

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

Како работи

Креирајте местенка со .placeholderкласата и класа на колона на мрежа (на пример, .col-6) за да го поставите width. Тие можат да го заменат текстот во елемент или да се додадат како класа на модификатор на постоечка компонента.

Применуваме дополнителен стајлинг на .btns via ::beforeза да се осигураме дека heightсе почитува. Може да ја проширите оваа шема за други ситуации по потреба или да додадете  во елементот за да ја одрази висината кога на негово место ќе се изрече вистинскиот текст.

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>

Употребата aria-hidden="true"само покажува дека елементот треба да биде скриен за читателите на екранот. Однесувањето за вчитување на заштитното место зависи од тоа како авторите всушност ќе ги користат стиловите на заштитните места, како планираат да ги ажурираат работите итн. Можеби ќе биде потребен некој JavaScript код за да се замени состојбата на заштитното место и да се информираат корисниците на AT за ажурирањето.

Ширина

Можете да ги промените widthкласите на колони преку мрежа, алатките за ширина или вградените стилови.

html

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

Боја

Стандардно, placeholderкористи currentColor. Ова може да се отфрли со приспособена класа на боја или услужна класа.

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>

Димензионирање

Големината на .placeholders се заснова на типографскиот стил на матичниот елемент. Приспособете ги со модификатори за големина: .placeholder-lg, .placeholder-sm, или .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>

Анимација

Анимирајте ги приврзаниците со .placeholder-glowили .placeholder-waveза подобро да ја пренесете перцепцијата за нешто што активно се вчитува.

html

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

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

Сас

Променливи

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