Načítání

Jaký typ zvolit

Výběr vhodného loaderu je vždy otázkou kontextu konkrétní stránky. Vše záleží na vizuální reprezentaci načítaných dat, zda se načítá celá stránka, její část nebo se jedná o načítání v rámci komponenty.

Determinismus

• Konečný
• Nekonečný

Tvar

• Progress bar
• Spinner

Alternativa

• Skeleton

Determinismus

Pokud znáte přesný objem dat k přenosu, konečný loader je ideální volba. V ostatních případech použijte nekonečný loader. Konkrétní ukázky jsou k dispozici v následující sekci.

Tvar

Výběr tvaru je silně ovlivněn způsobem zobrazení dat a zda chceme uživateli dočasně znemožnit práci se stránkou.

Progress bar

Vhodný pro dynamické dočítání dat, které nijak neovlivňuje práci uživatele. Nekonečná varianta je v praxi například umístěna v horní části DataGridu a CalendarFramu, konečná pak u FileEditu při uploadu souboru.

<!-- Nekonečný -->

<div class="foo">
    <div class="loader-container-endless">
        <div class="bar"></div>
    </div>
</div>

<!-- Konečný -->

<div class="foo">
    <div class="loader-container">
        <div class="bar"></div>
    </div>
</div>

.loader-container-endless {
   .progress-bar-endless;
}
   
.loader-container {
   .progress-bar;
}

Spinner

Je možné jej umístit přímo doprostřed komponenty nebo celé stránky. V současné době se používá pouze pro nedeterministické načítání, například v tlačítku Přihlášení, tlačítkách v toolbaru nebo editačních komponentách. V případě zájmu je možné připravit i jeho konečnou verzi (tzv. progress circle).

<!-- Výchozí -->

<div class="foo">
    <div class="loader-container">
        <div class="loader">
            <div class="left">
                <div class="border"></div>
            </div>
            <div class="right">
                <div class="border"></div>
            </div>
        </div>
    </div>
</div>

<!-- Světlý -->

<div class="foo">
    <div class="loader-container-light">...</div>
</div>

<!-- Barevný -->

<div class="foo">
    <div class="loader-container-colored">...</div>
</div>

<!-- Baervný, velký -->

<div class="foo">
    <div class="loader-container-large-colored">...</div>
</div>

.loader-container {
   .spinner;
}
   
.loader-container-light {
   .spinner(light)
 }
   
.loader-container-colored {
   .spinner(colored)
}
   
.loader-container-large-colored {
   .spinner(var(--base-6), colored)
}

Skeleton

I když vybereme ten nejvhodnější loader, nevyřešíme tím příčinu problému - akce požadovaná uživatelem není okamžitá a musí čekat. Velkou frustraci může způsobit, pokud tentýž loader vidí uživatel mnohokrát denně. Existuje alternativa v podobě skeleton loadingu, u kterého je využit layout obsahu již při jeho načítání.

Před načtením obsahu se zobrazí loader ve formě kostry obsahu, kdy jsou texty a obrázky nahrazeny tvary. Tento efekt má pozitivní vliv na lidské vnímání času, protože aniž by byl načten jediný kousek dat, už vidíme něco hmatatelného. Jelikož je skeleton potřeba vytvořit na míru obsahu, neexistuje pro něj žádná HTML šabona ani připravené styly. Inspiraci je možné najít na internetu nebo v komponentě TreeFrame.

TreeFrame

YouTube

Facebook

LinkedIn