Bloccare la UI in Javascript con FreezeUI

Mattepuffo's logo
Bloccare la UI in Javascript con FreezeUI

Bloccare la UI in Javascript con FreezeUI

Programmazione, Javascript - AJAX

Può capitare di dover eseguire una operazione lunga in Javascript e di voler bloccare temporaneamente tutta la UI.

Ovviamente potremmo usare un modal e caricarci una icona dentro, oppure usare un loading dialog.

In questo articolo useremo FreezeUI!

Molto semplice da usare, non richiede altre dipendenze, ed è scritto in vanilla Javascript.

Io ho scaricato la cartella da GitHub e messo tutto sul server.

Qui la pagina di esempio:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>TEST</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link href="FreezeUI-master/freeze-ui.min.css" type="text/css" rel="stylesheet"/>
        <script src="FreezeUI-master/freeze-ui.min.js" type="text/javascript"></script>
        <script>
            window.onload = function () {
                FreezeUI({text: 'Loadin...'});
                setTimeout(function () {
                    fetch('https://jsonplaceholder.typicode.com/todos/1')
                        .then(response => response.json())
                        .then(json => {
                            UnFreezeUI();
                            console.log(json);
                        });
                }, 3000);
            }
        </script>
    </head>
    <body>
    </body>
</html>

Per vedere il funzionamento ho fatto una chiamata AJAX dopo 3 secondi che è stata carica la pagina.

Enjoy!

Condividi

Commentami!