Načítání
Informuje o stavu běžícího procesu jako načítání aplikace, dat nebo ukládání změ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;
}Hodnota progress baru Pomocí scriptu nastavte v kontejneru loaderu (v příkladu výše se jedná o element .loader-container) hodnotu property --progress v rozmezí 0-100.
Pozicování Nadřízený element kontejneru loaderu musí mít nastavenu postion: relative, absolute, fixed nebo sticky, protože
loader je pozicován absolutně.
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)
}Pozicování Nadřízený element kontejneru loaderu musí mít nastavenu postion: relative, absolute, fixed nebo sticky, protože
loader je pozicován absolutně.
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
