colocando funcionalidade no spinner

paulatalim · paulatalim · commit e24610c7b873 · 2023-01-18T22:14:02.000-03:00
diff --git a/css/style.css b/css/style.css
@@ -42,8 +42,16 @@ body {
 }
 
 /*** CARREGAMENTO ***/
+.subsessao-carregamento {
+    width: 100vw;
+    height: 100vh;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .load {
-    display: none;
     width: 80px;
     height: 80px;
 
@@ -66,6 +74,7 @@ body {
 		transform: rotate(360deg);
 	}
 }
+
 /*** DESTAQUES ***/
 .destaque {
     margin: 0;
diff --git a/index.html b/index.html
@@ -53,7 +53,10 @@
         <!-- Destaques -->
         <section class="row destaque" id="destaques">
             <!-- Carregamento -->
-            <div class="load"></div>
+            <div class="subsessao-carregamento">
+                <div class="load"></div>
+            </div>
+            
 
             <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
                 <ol class="carousel-indicators">
diff --git a/js/sketch_homepage.js b/js/sketch_homepage.js
@@ -35,6 +35,7 @@ function exibir_games_destaques(data) {
                     </div>
                 </div>`
     }
+    document.querySelector('.subsessao-carregamento').style.display = "none"
     document.getElementById('destaque-slide').innerHTML = str
     
     return data;

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ function exibir_games_destaques(data) {`
`35`	`35`	`</div>`
`36`	`36`	</div>`
`37`	`37`	`}`
	`38`	`+ document.querySelector('.subsessao-carregamento').style.display = "none"`
`38`	`39`	`document.getElementById('destaque-slide').innerHTML = str`
`39`	`40`
`40`	`41`	`return data;`