[Solved] How to make page loaders/animations/transitions

by


I go about it by providing different states for your page (eg. loading, loaded, and error). And passing in a status parameter, then using css to add a display: none class to it. (the hide class is display: none)

function setStatus(status) {
        document.getElementById("loading").classList.add("hide");
        document.getElementById("contents").classList.add("hide");
        if (status == "loaded") {
                document.getElementById("contents").classList.remove("hide");
        }
        if (status == "loading") {
                document.getElementById("loading").classList.remove("hide");
        }
        if (status == "error") {
                document.getElementById("error").classList.remove("hide");
                document.getElementById("consultant-wrapper").classList.remove("hide");
        }
        if (status == "info") {
                document.getElementById("not-enough-info").classList.remove("hide");
                document.getElementById("consultant-wrapper").classList.remove("hide");
        }

}

solved How to make page loaders/animations/transitions