V tomto příspěvku si probereme problematiku loaderu - zavaděče, tedy prvku, který ukazuje, že načítání stránky ještě není dokončeno.
Loader je otáčející se kolečko, které má obvykle dvě protilehlé čtvrtiny kruhu v tmavší barvě.
Vyjdeme z toho, že jakýkoli <div> je vlastně obdélník, nebo čtverec, kterému lze nastavit šířku obrysu a také zaoblení rohů.
V Html si připravíme strukturu dvou vnořených <div>, kde první musí mít pevnou polohu vůči obrazovce a měl by překrýt co nejmenší část obrazovky, aby kolem loaderu byla dostupná například tlačítka menu. Vnořený <div> bude tvořit samotné otáčející se kolečko.

<div id="idloader" class="fixdiv" style="top:40%">
<div class="loader">
</div></div>

Pokud budeme potřebovat loader vypnout, odstraníme celou tuto konstrukci odkazem na id="idloader". Uvedené class nastavíme ve <style> takto:

<style>
.fixdiv { position: fixed; top: 50%; left: 0; width: 100%; z-index: 10;
background-color: transparent; border: 0; }

Position fixed, zajistí pevnou polohu vůči obrazovce. Šířku nastavíme na 100%, abychom další objekt mohli uvnitř tohoto <div> horizontálně vycentrovat. Výšku height nezadáme a tak tento <div> přizpůsobí svou výšku vloženému objektu. Pokud žádný objekt nevložíme, bude to vodorovná čára od okraje do okraje a vertikálně bude umístěna přesně uprostřed. Jakmile do něj vložíme nějaký objekt, zůstane vertikálně uprostřed horní okraj vloženého objektu. Z-index zajistí, že bude vždy na povrchu a vše s nižším číslem bude skryto pod ním. Dále jsme nastavili průhlednou výplň a žádný okraj, takže tento <div> nebude viidět.

.loader { margin-left: auto; margin-right: auto; float: none; width: 80px; height: 80px;
border: 8px solid #e5e5e5; border-top-color: #50779f; border-bottom-color: #50779f;
border-radius: 50%; 

Kombinace margin auto a float none zajistí polohu loaderu v horizontálním středu v objektu do kterého je vložen. Uvedeným vložením tří barev zajistíme, že čtverec bude mít vždy dvě protilehlé strany stejné barvy a radius 50% udělá ze čtverce kolečko.
Zbývající část definice převezmeme z příručky tak, jak je doporučena bez analýzy:

-webkit-animation: spin 4s linear infinite; animation: spin 4s linear infinite; }
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
</style>

Loader potřebujeme vypnout v okamžiku, kdy je zdárně načten celý kód stránky.
Můžeme k tomu využít například tuto funkci:

<script>
function noLoader () {
document.getElementById("idloader").style.display = "none";
}
window.onload = noLoader;     /* funkcí onload může pracovat několik, () nemusí být uvedeno */
</script>

Takovou funkci můžeme použít po načtení jakéhokoli objektu a nemusí to být vždy právě stránka.

Souvisejícím tematem je, jak zajistit, abychom mohli nějakou část kódu ve stránkách vyměnit, aniž bychm museli měnit kódy v hotových stránkách, pokud úložiště nenabízí možnost aktualizace uloženého obrázku či souboru beze změny odkazu. Základní způsob nahrání nějaké části kódu ze souboru se zadává takto:

<script src = "https://blabala.cz/_files/200000226-d63d63b9/data.js"> </script>
<script src = "//blabala.cz/_files/200000226-d63d63b9/data.js"> </script>

Vkládaný soubor musí mít podle příruček příponu .js (javascript) a uvnitř kódu tohoto souboru se nesmí vyskytovat ani <script> ani </script>. Při spouštění stránek na PC to funguje ok. Aby to fungovalo také v mobilních telefonech, nesmí mít soubor žádnu příponu. Když nahrajeme soubor s aktalizovaným obsahem, bude mít jinou adresu. Adresu odkazu na soubor vložíme do proměnné a nezapomeneme na to, že pokud se uvede var, jedná se o lokální proměnnou, pokud se var neuvede, stane se proměnná globální, ze všech míst kódu přístupnou. Na vrcholu můžeme var před proměnnou uvést.

<script>
var topToscript = "//blabala.cz/_files/200000226-d63d63b9/data"
</script>

Můžeme vytvořit prázdnou část <script> a přidělit jí scr z globální proměnné. Tento zápis již nebude potřeba měnit:

var scripTag = document.createElement('script');
scripTag.src = topToscript;

Aby tato nová část <script> byla viditelná ze všech úrovní, je potřeba ji umístit před všechny ostatní části <script>. Vytvoříme proměnnou ukazující na první již existující <script> a <script> který jsme načetli ze souboru, vložíme ještě před ten první:

var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(scripTag, firstScriptTag);

Loader na stránkách můžeme potom ukončit pomocí příkazu:

scripTag.onload = function() { noLoader() };

Nebo v nějaké funkci vyhodnotit jak načtení stránky, tak načtení externího souboru, nebo více externích souborů atd ...