add spinner to generator

HE-Arc · Jun 10, 2021 · 230d7f1 · 230d7f1
1 parent 2900758
commit 230d7f1
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 0 deletions.
diff --git a/css/app.css b/css/app.css
@@ -17,3 +17,22 @@ form .col {
 #section-about {
     font-size: 1.3em;
 }
+
+#loading {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    position: fixed; 
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.7;
+    background-color: #ddd;
+    z-index: 99;
+}
+
+#loading-image {
+    display: block;
+    z-index: 100;
+}
diff --git a/images/loading.gif b/images/loading.gif
diff --git a/index.html b/index.html
@@ -12,6 +12,11 @@
 
     </head>
     <body class="blue-grey darken-4 white-text">
+
+        <div id="loading">
+            <img id="loading-image" src="images/loading.gif" alt="Loading..." />
+        </div>
+
         <div class="container">
             <div class="center">
                 <h1>PWA Playlist Generator</h1>

diff --git a/js/generator-app.js b/js/generator-app.js
@@ -205,6 +205,7 @@ function generatePWAZip(dataHtml, dataManifest)
             .then((blob) =>
             {
                 // Triggers the download
+                document.getElementById("loading").style.display = "none";
                 triggerDownload(title, blob);
             });
         })
@@ -275,6 +276,7 @@ document.querySelector('#input-icon512').addEventListener('change', (evt) =>
 document.querySelector('#btn-pwa-generate').addEventListener('click', (evt) =>
 {
     evt.preventDefault();
+    document.getElementById("loading").style.display = "flex";
 
     // Builds the HTML tree based on the tree structure
     audioFileID = 1;