Velmi jednoduchý Preloader

  Článek jsem zveřejnil 11.01.2023 a zařadil ho do kategorie:  Programování.
Počet shlédnutí: 546

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.

  • Facebook
  • Twitter
  • LinkedIn
  • Email
Máte jiný názor? Potřebujete něco dovysvětlit? Napište..
Prosím zdržte se urážek, slovního napadání a dalších píčovin.
Vaše jméno

Váš e-mail

Váš komentář



Tento článek nikdo neokomentoval.