update style

Author: Hugues Signamarcheix

front/index.html

@@ -10,7 +10,10 @@
     	<h1>Javascript workers in action</h1>
     	<div class="container">
     		<button id="refresh" class="btn">Génerer de nouvelles données</button>
-            <div id="text-placeholder"></div>
+            <div id="text-placeholder" class="is-empty"></div>
+            <div class="loader">
+                <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+            </div>
     	</div>
         <script src="javascript/script.js"></script>
     </body>

front/javascript/script.js

@@ -4,16 +4,20 @@ document.addEventListener("DOMContentLoaded",() => {
 
 		let btnRefresh = document.getElementById("refresh");
 		let textPlaceholder = document.getElementById("text-placeholder");
+		let container = document.getElementsByClassName("container")[0];
 
 		btnRefresh.addEventListener("click",() => {
+		  textPlaceholder.innerHTML = '';
+		  textPlaceholder.classList.add('is-empty');
+		  container.classList.add('is-loading');
 		  worker.postMessage('test');
-		  console.log('Message envoyé au worker');
 		});
 
 		worker.onmessage = function(e) {
 	  		let textContent = e.data;
-	  		console.log('Message reçu depuis le worker '+ textContent);
 	  		textPlaceholder.innerHTML = textContent;
+	  		container.classList.remove('is-loading');
+	  		textPlaceholder.classList.remove('is-empty');
 		}
 	}
 })

front/scss/components/loader.scss

@@ -0,0 +1,30 @@
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+  div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 8px solid #000;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #000 transparent transparent transparent;
+    &:nth-child(1) { animation-delay: -0.45s; }
+    &:nth-child(2) { animation-delay: -0.3s; }
+    &:nth-child(3) { animation-delay: -0.15s; }
+  }
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

front/scss/pages/index.scss

@@ -0,0 +1,38 @@
+h1 {
+	font-family: sans-serif;
+}
+.container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	#refresh {
+		width: 30%;
+		padding: 10px;
+		background-color: #268fc3;
+		color: white;
+		font-size: 16px;
+		border-radius: 5px;
+		outline: none;
+	    margin-bottom: 20px;
+	}
+	#text-placeholder {
+		&.is-empty { padding: 100px 20px; }
+		background-color: lightgray;
+	    padding: 20px 20px;
+	    line-height: 20px;
+	    letter-spacing: 1px;
+	    font-family: sans-serif;
+	    border-radius: 5px;
+	    width: 96%;
+	}
+	.loader {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+	}
+	&:not(.is-loading) {
+		.loader { display: none; }
+	}
+}

front/scss/style.scss

@@ -0,0 +1,3 @@
+@import 'pages/index';
+
+@import 'components/loader'