loadingpage/index.html at master · arditian/loadingpage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Fake</title>
</head>
<body>
    <div id="app" style="display: flex; justify-content: center; align-items: center; height: 100vh">
        <!-- new elemet created -->
    </div>
    <script>
        onload = () => {
            //declare variable
            let id = document.getElementById("app")
            let loading = document.createElement("div")

            //fill content
            loading.textContent = "Loading"
            loading.style.fontSize = "28px"
            id.appendChild(loading)

            //DOM time 1000 ms = 1s
            let loaded = setInterval (() => {
                loading.textContent = loading.textContent + "."
            }, 1000) //1s

            // stop interval
            setTimeout(() => {
                clearInterval(loaded)
                loading.textContent = "WELCOME TO OUR PAGE"
            }, 4000) //4s
        }
    </script>
</body>
</html>