Klikněte si:
Hezké, že? Po kliknutí na tlačítko se úplně nahoře na stránce promítne červené znázornění načtení stránky. V HTML kódu stačí na prvním řádku změnit číslo u buttonu u prubeh ze čtyřky na libovolné číslo (zvýrazněno červeně):
HTML:
<button onclick="prubeh(4, document.getElementById('postup'))">Klikni pro spuštění animace na vrchu stránky</button>
<div id="postup" class="postup"></div>
CSS:
.postup {height: 10px; background: red; width: 0; position: fixed; top: 0; left: 0;}
JS:
var prubeh = function(cas, postup) {
var animovat = function() {
postup.style.transition = "width " + cas + "s";
postup.style.width = "100%";
};
var vycistit = function() {
postup.style.width = "0";
postup.style.transition = "";
};
animovat();
setTimeout(vycistit, cas * 1000);
};