Animace načítání stránky – JavaScript

Klikněte si:

Živá ukázka

Zdrojový kód

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);
};

Napište komentář!