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

Question

Well, I just saw on the site of semantic the topic of loading, where the various types of loadings, but I was left with doubt of how I would do so that when the content was being loaded was with this loading and when it was fully loaded it is lost the loading.

Answer 1

Just add the 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 event onload to verify when elements were loaded.

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

    alert("carregado");
};