Creare un loading dialog con i CSS

Mattepuffo's logo
Creare un loading dialog con i CSS

Creare un loading dialog con i CSS

Oggi vediamo come creare un loading dialog con i CSS.

Non useremo immagini, ma solo una combinazione di stile; useremo solo un scriptino Javascript per stoppare il loader.

In fin dei conti il loader andrà nascosto ad un certo punto, e al 99% sarà una operazione che farete in Javascript.

Qui sotto il codice completo della pagina:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TEST</title>
        <style>
            #loader {
                border: 20px solid transparent;
                border-top: 20px solid #000000;
                border-bottom: 20px solid #000000;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                animation: rotate 1s linear infinite;
                margin: 0 auto;
            }

            @keyframes rotate {
                to {
                    transform: rotate(360deg);
                }
            }
        </style>

        <script>
            window.onload = function () {
                setTimeout(function () {
                    let loader = document.getElementById('loader');
                    loader.style.display = "none";
                }, 5000);
            }
        </script>
    </head>
    <body>
        <div id="loader"></div>
    </body>
</html>

Enjoy!


Condividi su Facebook

Commentami!