How do I display loading while the page is loading with Semantic UI?

0

Well, I just saw in the semantic site the loading topic, where the various types of loadings, but I was not sure how I would do it so that when the content was being loaded it would take that loading and when it was fully loaded it loses itself loading.

    
asked by anonymous 24.12.2017 / 03:26

1 answer

1

Just add loading with html

<style>
    * {
        padding:0;
        margin:0;
    }
    html, body, #loader {
        height: 100%;
        width: 100%;
    }
    #loader {
        background: #000 url('https://loading.io/spinners/flask/index.svg') no-repeat center center;
    }
</style>

<div id="loader"></div>

And just use the onload event to check when the elements were loaded.

window.onload = function() {
    document.querySelector("#loader").style.display = "none";

    alert("carregado");
};
    
24.12.2017 / 04:29