Loading Sign

css/notes_app.css

@@ -22,6 +22,27 @@ body{
     border:1px black solid;
 }
 
-progress {
-    width: 312px;
-}
+.loader {
+    border: 3.2px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 3.2px solid #3498db;
+    width: 24px;
+    height: 24px;
+    -webkit-animation: spin 2s linear infinite; /* Safari */
+    animation: spin 2s linear infinite;
+    display: none;
+  }
+  
+  @-webkit-keyframes spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+
+
+

scripts/notes_app.js

@@ -9,7 +9,6 @@ $(document).ready(function(){
         console.log(this)
         let buttonId = (this.id).split("saveNoteButton")[1];
         console.log(buttonId)
-        createProgressBar(buttonId);
         saveNoteObject(buttonId);
     })
 })
@@ -65,10 +64,11 @@ function sleep(ms) {
 async function saveNoteObject(id){
 
     console.log(id)
+    enableLoadingSign(id);
     await sleep(10000) //sleep simulates the remote server access or similar, 
                        //so instead of sleep would be e.g. saveToRemoteServer()...
                        //the leftover code of the async function is executed after the delay
-    
+    disableLoadingSign(id);
     
     let noteTitle = document.getElementById('inputTitle'+id).value;
     let noteText = document.getElementById('noteText'+id).value; 
@@ -83,25 +83,25 @@ async function saveNoteObject(id){
     console.log(noteObj_serialized)
 }
 
-function enableProgressBar(id){
-    console.log('pBar'+id)
-    document.getElementById('pBar'+id).value = 
-    document.getElementById('pBar'+id).value + 5;
-    if (document.getElementById('pBar'+id).value == 100){
-        clearInterval(ctr);
-    }
+function enableLoadingSign(id){
+    createLoadingSign(id)
+    document.getElementById('loadSign'+id).style.display = "block";
+}
+
+function disableLoadingSign(id){
+    let sign = document.getElementById('loadSign'+id);
+    sign.style.display = "none";
+    sign.parentNode.removeChild(sign);
 }
 
-function createProgressBar(id){
+function createLoadingSign(id){
 
-    let progressBar = document.createElement('progress');
-    let progressBarWrapper = document.createElement('div');
-    progressBarWrapper.setAttribute('class', 'pBars')
-    progressBar.setAttribute('value', '0');
-    progressBar.setAttribute('max', '100');
-    progressBar.setAttribute('id', 'pBar'+id);
-    progressBarWrapper.appendChild(progressBar);
-    document.getElementById(id).appendChild(progressBarWrapper);
+    let loadingSign = document.createElement('div');
+    let loadingSignWrapper = document.createElement('div');
+    loadingSign.setAttribute('class', 'loader')
+    loadingSign.setAttribute('id', 'loadSign'+id);
+    loadingSignWrapper.appendChild(loadingSign);
+    document.getElementById(id).appendChild(loadingSignWrapper);
 }