LoaderScreen Added

app/components/LoadingScreen.js

@@ -4,7 +4,6 @@ import Spinner from './spinner';
 const LoadingScreen = () => {
   return (
     <div className="loading-screen">
-      <h1>Cargando...</h1>
       <Spinner/>
     </div>
   );

app/components/spinner.css

@@ -1,36 +1,51 @@
 html {
-  background-color: #333;
+  background-color: rgba(0, 0, 0, 0.152);
   display: flex; /* Usar flexbox */
   justify-content: center; /* Centrar horizontalmente */
   align-items: center; /* Centrar verticalmente */
   height: 100vh; /* Hacer que el html ocupe toda la altura de la pantalla */
   text-align: center;
   transition: 500ms;
+  font-weight: bold;
+  transition: 500ms;
 }
 
 .spinner {
+  margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100px; /* Ajusta la altura según sea necesario */
   transition: 500ms;
+  transition: 500ms;
 }
 
-.spinner-circle {
-  width: 50px; /* Ajusta el tamaño del círculo según sea necesario */
-  height: 50px; /* Ajusta el tamaño del círculo según sea necesario */
-  border: 5px solid #ccc; /* Cambia el color y el estilo del borde según sea necesario */
-  border-radius: 50%; /* Hace que el borde sea redondeado para formar un círculo */
-  border-top-color: #333; /* Cambia el color del borde superior para dar la apariencia de movimiento */
-  animation: spin 1s infinite linear; /* Agrega una animación giratoria infinita */
+.loaderspinner {
+  width: 8px;
+  height: 8px;
+  position: fixed;
+  border-radius: 50%;
+  background: rgba(227, 153, 73, 0.632);
+  animation: wave 1s ease-in infinite;
   transition: 500ms;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
+@keyframes wave {
+ 0% {  box-shadow:
+  0 0 0 0px rgba(227, 153, 73, 0.632),
+  0 0 0 20px rgba(13, 0, 255, 0.066),
+  0 0 0 40px rgba(255, 170, 1, 0.36),
+  0 0 0 60px rgba(0, 81, 255, 0.244),
+  0 0 0 80px rgba(255, 0, 0, 0.034)
   }
-  100% {
-    transform: rotate(360deg);
+  100% {  box-shadow:
+    0 0 0 80px rgba(255, 136, 0, 0),
+    0 0 0 60px rgba(0, 81, 255, 0.2),
+    0 0 0 40px rgba(255, 115, 0, 0.168),
+    0 0 0 20px rgba(0, 157, 255, 0.397),
+    0 0 0 0px rgba(255, 136, 0, 0.73)  
   }
 }
+
+
+

app/components/spinner.jsx

@@ -5,9 +5,9 @@ import "./spinner.css"; // Corrige el nombre del archivo aquí
 
 const Spinner = () => {
   return (
+
     <div className="spinner">
-      {/* Agrega aquí la animación de carga */}
-      <div className="spinner-circle"></div>
+      <span class="loaderspinner"></span>
     </div>
   );
 };

app/css/main.css

@@ -18,6 +18,7 @@ html{
 }
 
 .main{
+    overflow-y: auto; /* Permitir desplazamiento vertical cuando sea necesario */
     margin-left: 5%;
     width: 90%;
     height: 100%;