Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Loader</title>

    <style>
        #loader {
            position:absolute;
            left:50%;
            top:50%;
            z-index: 1;
            width:120px;
            height:120px;
            margin:-76px 0 0 -76px;
            border: 16px solid #f3f3f3;
            border-radius:50%;
            border-top:16px solid #3498db;
            animation:spin 2s linear infinite;
        }

        @keyframes spin {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(360deg);}
        }

        .animate-bottom {
            position: relative;
            animation-name: animatebottom;
            animation-duration: 1s;
        }

        @keyframes animatebottom {
            from {bottom:-100px; opacity:0;}
            to {bottom:0; opacity:1;}
        }

        #myDiv {
            display: none;
            text-align: center;
        }
    </style>
</head>
<body onload="MyFunction()" style="margin:0;">
    <div id="loader">
        <div style="display:none; margin-top: 250px;" id="myDiv" class="animate-bottom">
            <h1>Loaded!</h1>
            <p>Text on loaded site:)</p>
        </div>
    </div>

    <script>
        var myVar;

        function myFunction() {
            myVar = setTimeout(showPage, 3000);
        }

        function showPage() {
            document.getElementById("loader").style.display = "none";
            document.getElementById("myDiv").style.display = "block";
        }
    </script>
</body>
</html>
Editor is loading...