Velmi jednoduchý Preloader
1.
<div id="preloader"> <div id="status">Načítám, strpení...</div> </div>
<div id="preloader"> a <div id="status"> by měly být umístěny v hlavičce vašeho HTML dokumentu, mezi tagy <head> a </head>. Tím zajistíte, že se preloader zobrazí okamžitě po načtení stránky, než se načtou ostatní prvky stránky.
Jinak kdybyste to chtěli umístit do těla (<body>) tak by se preloader zobrazil až poté co se načetou ostatní prvky, což není účelem preloaderu.
2.
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 99999; } #status { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 36px; text-align: center; }
Vložte do css souboru. V případě potřeby si můžete pozměnit dle vlastní libosti.
3.
<script>document.onreadystatechange = function () { var state = document.readyState if (state == 'complete') { document.getElementById('preloader').style.display = "none"; } }</script>
Vložte nad </body> . Tento kód bude sloužit k ověření, zda-li je stránka načtena. Když se stránka načte, skryje se preloader.
