Agregado spinner de carga.

Marcelo Puebla
1 parent 6c30b17918
Showing 2 changed files with 12 additions and 1 deletions Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
src/app/components/busqueda-productos/busqueda-productos.component.scss
@@ -52,7 +52,7 @@
       </div>      
  
       <!-- SEARCH INPUT -->
-      <div class="col-sm-10">
+      <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
  
         <div class="form-group row search">
           <div class="col-sm-10">
@@ -102,6 +102,12 @@
         </div>
       </div>
  
+      <!-- SPINNER -->
+      <div *ngIf="productos.length === 0"  class="col-sm-10 align-self-center">
+          <div class="spinner-border spinner-lg text-secondary" role="status"></div>
+          <span class="text-secondary m-2 h5">Cargando información.</span>
+      </div>
+
     </div>
  
   </div>
@@ -12,3 +12,8 @@
   min-height: auto !important;
   max-height: 70vh !important;
 }
+
+.spinner-lg{
+  width: 3rem !important;
+  height: 3rem !important;
+}
...	...	@@ -52,7 +52,7 @@
52	52	</div>
53	53
54	54	<!-- SEARCH INPUT -->
55		- <div class="col-sm-10">
	55	+ <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
56	56
57	57	<div class="form-group row search">
58	58	<div class="col-sm-10">
...	...	@@ -102,6 +102,12 @@
102	102	</div>
103	103	</div>
104	104
	105	+ <!-- SPINNER -->
	106	+ <div *ngIf="productos.length === 0" class="col-sm-10 align-self-center">
	107	+ <div class="spinner-border spinner-lg text-secondary" role="status"></div>
	108	+ <span class="text-secondary m-2 h5">Cargando información.</span>
	109	+ </div>
	110	+
105	111	</div>
106	112
107	113	</div>
...	...	@@ -12,3 +12,8 @@
12	12	min-height: auto !important;
13	13	max-height: 70vh !important;
14	14	}
	15	+
	16	+.spinner-lg{
	17	+ width: 3rem !important;
	18	+ height: 3rem !important;
	19	+}