No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

Reto: loading skeletons

21/34
Recursos

Aportes 56

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?


saque mi loader de esta p谩gina https://uiverse.io/ hay much铆simos 馃お馃お馃お馃お馃お

Aun no he visto los cursos de animaciones pero me puse a buscar mas o menos como funciona cada propiedad que usa el profesor para entender y aplicarlo a mi diseno.
Aplique lo mismo solo que con mis colores y le agregue un borde con un color con muy baja opacidad

Asi es como va actualmente mi TodoMachine

Yo a帽ad铆 una animaci贸n de puntitos rebotando

Cumpliendo con el reto, he utilizado material UI para la animaci贸n de <TodosLoading/>
(

import  CircularProgress  from "@mui/material/CircularProgress"
import Box from "@mui/material/Box"

function TodosLoading () {
    return (
        <Box sx={{ display: 'flex' }}>
            <CircularProgress />
        </Box>
    )
}

export { TodosLoading}

Aqui dejo una animacion sencilla con dots que hice para el reto !!!
馃

Este fu茅 mi resultado para mostrar la animaci贸n del skeleton, pongo la referencia de donde me bas茅 el cu谩l me pareci贸 f谩cil de entender en comparaci贸n con otros ejemplos algo rebuscados. freecodecamp.

TodosLoading/index.js

function TodosLoading(){
    return (
        <>
        <div className="item-container-skeleton">
            <div className="img-round skeleton"></div>
            <p className="skeleton skeleton-text__body skeleton-text"></p>
            <div className="img-round skeleton"></div>
        </div>
         <div className="item-container-skeleton">
            <div className="img-round skeleton"></div>
            <p className="skeleton skeleton-text__body skeleton-text"></p>
            <div className="img-round skeleton"></div>
         </div>
         <div className="item-container-skeleton">
            <div className="img-round skeleton"></div>
            <p className="skeleton skeleton-text__body skeleton-text"></p>
            <div className="img-round skeleton"></div>
         </div>
         </>
    );
}

TodosLoading/TodosLoading.css

.item-container-skeleton {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
    margin-top: 10px;
    margin-right: 35px;
    border-color: #808080;
    box-shadow: 0 2px 5px darkgray;
    height: 56px;
 }

 .img-round {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: gray;
    margin-top: 15px;
    margin-right: 10px;
    margin-left: 10px;
 }

 .skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
  }
  
  @keyframes skeleton-loading {
    0% {
      background-color: hsl(200, 20%, 80%);
    }
    100% {
      background-color: hsl(200, 20%, 95%);
    }
  }
  
  .skeleton-text {
    width: 100%;
    height: 0.7rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
  }
  
  .skeleton-text__body {
    width: 75%;
  }
  
  .skeleton-footer {
    width: 30%;
  }

As铆 qued贸:

Encontr茅 un sitio con loaders ya creados, proporcionan la animacion junto con el c贸digo respectivo, se llama CSS Loader, espero les sirva, a mi me gust贸 mucho.

Asi va quedando

Y esta es otra version

Para los que ya saben CSS y quieren seguir avanzando con mas conceptos de react, les dejo el CSS de TodosLoading.js y la estructura del componente

COMPONENTE:

import './TodosLoading.css'

function TodosLoading() {
  return (
    <div className='LoadingTodo-container'>
      <span
      className='LoadingTodo-completeIcon'>
      </span>
      <p className='LoadingTodo-text'></p>
      <span
      className='LoadinTodo-deleteIcon'></span>
    </div>
  );
};

export { TodosLoading };

CSS:

.LoadingTodo-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  box-shadow: 0px 5px 50px rgba(32, 35 41 0.15);
  border-radius: 10px;
  padding: 12px 0;
}

.LoadingTodo-text {
  margin: 24px 0 24px 24px;
  Width: calc(100% - 120px);
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
}

.LoadingTodo-completeIcon,
.LoadinTodo-deleteIcon {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  height: 48px;
  width: 48px;
}

.LoadingTodo-completeIcon {
  position: absolute;
  left: 12px;
}

.LoadinTodo-deleteIcon {
  position: absolute;
  top: -24px;
  right: 0;
}

.LoadingTodo-container,
.LoadingTodo-completeIcon,
.LoadinTodo-deleteIcon {
  background: linear-gradient(90deg, rgba(250, 250, 250, 1), rgb(200, 199, 199));
  background-size: 400% 400%;
  animation: loadingAnimation 3s ease-in-out infinite;
}
  
@keyframes loadingAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
};

Gracias!!!

Buenas, dejo mi aporte sobre el loading skeleton.

.TodoLoading,
  .TodoLoadingCheck,
  .TodosLoadingDelete {
    background: linear-gradient(90deg, rgb(25, 25, 25), rgb(76, 76, 76));
    background-size: 400% 400%;
    animation: skeleton-loading 2s ease-in infinite;
  }
  
  @keyframes skeleton-loading {
    0% {
      background-position: 80% 50%;
    }
    50% {
      background-position: 50% 80%;
    }
    100% {
        background-position: 75% 45%;
      }
  }

css del min 08:40

Vaya que me demore haciendo girar la ruedita

Por ac谩 te dejo mi aporte por si tienes dudas de c贸mo generar la animaci贸n con ese efecto brilloso. Te dejo tambi茅n un enlace para que aprendas a crearlo por tu cuenta:

Skeleton Loading Shine Cards


JSX:

import React from 'react';
import './LoadingTodos.scss';

function LoadingTodos() {
    return (
        <div className="loading-box">
            <div className="loading-animation"></div>
        </div>
    )
}

export { LoadingTodos }

CSS

//Estilos del contenedor de mis todos
.loading-box {
  width: 30rem;
  height: 4rem;
  margin: 1rem 0;
  border: none;
  background-color: #ccc;
  border-radius: 0.7rem;
  position: relative;
  overflow: hidden;
}

//Estilos del contenedor de animaci贸n
.loading-box {
  width: 30rem;
  height: 4rem;
  margin: 1rem 0;
  border: transparent;
  border-radius: 0.7rem;
  background-color: #e2e5e7;
  position: relative;
}

.loading-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  background-size: 40px 100%;
  background-repeat: no-repeat;
  background-position: left -40px top 0;
  animation: shine 1s ease infinite;
  border-radius: 0.7rem;
}

@keyframes shine {
  to {
    background-position: right -40px top 0;
  }
}

**As铆 solucion茅 el reto con el TodoCounter 馃** ```js function TodoCounter({ completed, total, loading }) { return ( loading ? <h1 className='TodoCounter'>Cargando las tareas. : total === completed ? <h1 className='TodoCounter'>Felicidades, completaste todas las tareas 馃コ. : <h1 className='TodoCounter'>Has completado {completed} de {total} tareas 馃憤. ) } ```

Esta es mi implementaci贸n, a煤n no he visto los cursos de CSS avanzado ni de animaciones, no soy buen dise帽ador, pero esta es mi respuesta al reto:

El primer elemento, es el skeleton, lo dej茅 para ver lo que se ve铆a, en comparaci贸n con la lista de ToDOs, pero ser铆an igual que lo hizo JuanDC tres elementos, y la barra de cargando informaci贸n se va cargando. Se hizo con CSS:

TodoLoading.js

import React from 'react';
import './TodosLoading.css';

function TodosLoading() {
  return (
    <>
      <li className={`TodoItem-loading cat-0`}>
        
        <p className={`TodoItem-p-loading`}>
        <span className="loader-1"></span>
        </p>
      </li>
    </>
  );
}

export {TodosLoading};

y TodoLoading.css

.TodoItem-loading{
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 10px auto;
  padding: 10px;
  /* border: 1px solid darkgray; */
  box-shadow: 0px 1px 4px 0 LightBlue;
  border-radius: 10px;
  
  background: linear-gradient(90deg, rgba(250,250,250,1), rgb(200, 199, 199));
  background-size: 400% 400%;
  animation: loadingAnimation 3s ease-in-out infinite;
}

@keyframes loadingAnimation {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

.TodoItem-p-loading {
  width: 100%;
  text-align: center;
}

.cat-0 {
  border-left: 10px solid gray;
}

.loader-1{
  color: gray;
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 16px;
  font-weight: 400;
  position: relative;
}
.loader-1:after{
  content: 'Cargando tu informaci贸n... ';
  position: relative;
  z-index: 5;
  vertical-align:super;
}
.loader-1:before{
  content: '';
  height: 6px;
  border: 1px solid;
  border-radius: 10px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  background: linear-gradient(#FF3D00 100%, transparent 0) no-repeat;
  background-size: 0% auto;
  animation: 10s lineGrow linear infinite;
}

@keyframes lineGrow {to {  background-size: 100% auto}}

Use la fuente Flow circular
Para hacer que el texto se ve con border radius

No creo que se vea tan aburrido 馃槄

Si colocas un de total

console.log(total);

en el componente AppUI, ver谩n que se sigue renderizando ese componente de manera infinita.
Alguna idea de como arreglarlo ?

Mi solucion:

  • Crear 3 contenedores esquematicos con las mismas medidas de los que se cargaran.
  • En CSS ponerle con un before un background degradado.
  • Mediante una animacion CSS tranladar ese grandiente para hacer la animacion

RETO TodoCounter

import React from "react";
import "./TodoCounter.css";

function TodoCounter({ total, completed }) {
  let message;

  if (total === 0) {
    message = "No hay tareas pendientes.";
  } else if (total === completed) {
    message = "隆Felicidades, has completado todos los TODOs!";
  } else {
    message = `Has completado ${completed} de ${total} TODOs`;
  }

  return <h1 className="TodoCounter">{message}</h1>;
}

export { TodoCounter };

RETO.

Componente:

import React from 'react';
import './TodosLoading.css';

function TodosLoading() {
  return (

      <div className="loadingProcess"></div>

  );
}

export { TodosLoading };

CSS:

.loadingProcess {
  position: fixed;
  top: 20px;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loadingProcess::after {
  content: "";
  width: 105px;
  height: 105px;
  border: 15px solid #f3f3f3;
  border-top: 15px solid #72A9F2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}


@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}  

Creo que me falta aun mejorar. No es si deba quitar la palabra loading y poner un grafico de carga mas intuitivo para el usuario.

Logr茅 hacerle un efecto de onda con bing chat

Yo use TailwindCSS con Flowbite. En su libreria de componentes hay unos spinners muy sencillos y chulos.

https://flowbite.com/docs/components/spinner/

Me sent铆 como un ni帽o en una jugueter铆a JAJAJA鈥 fue mucha la curiosidad que me dio al estilizar el loader y probar con los diferentes estilos de CSS, falta por mejorar miles y miles de cosas鈥 No paremos de aprender.


TodosLoading.js

import React from 'react';
import './TodosLoading.css';

function TodosLoading() {
  return (
    <div className="loading-wave-container">
      <div className="loading-wave">
        <div className="loading-bar"></div>
        <div className="loading-bar"></div>
        <div className="loading-bar"></div>
        <div className="loading-bar"></div>
      </div>
    </div>
  );
}

export { TodosLoading };

TodosLoading.css

.loading-wave-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.loading-wave {
  width: 300px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-bar {
  width: 20px;
  height: 10px;
  margin: 0 5px;
  background-color: #3498db;
  border-radius: 5px;
  animation: loading-wave-animation 1s ease-in-out infinite;
}

.loading-bar:nth-child(2) {
  animation-delay: 0.1s;
}

.loading-bar:nth-child(3) {
  animation-delay: 0.2s;
}

.loading-bar:nth-child(4) {
  animation-delay: 0.3s;
}

@keyframes loading-wave-animation {
  0% {
    height: 10px;
  }

  50% {
    height: 50px;
  }

  100% {
    height: 10px;
  }
}

Hasta ahora amando React... As铆 vamos ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcGl0Mmx3OGFjZ3UwbHZxajl5M3lpN3R3NmF5NzhoamM4MHFsd2pibSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/EluiBLb79nW7Tj3Dlo/giphy.gif) ![]()
As铆 van los m铆os ![](https://static.platzi.com/media/user_upload/skeleton-41615655-4afb-4d51-96e5-db8b84c9a40f.jpg)

Les comparto mi loading.

Mi soluci贸n con Skeleton ```js import './TodoLoading.css'; import Skeleton from 'react-loading-skeleton' import 'react-loading-skeleton/dist/skeleton.css'; function TodoLoading({total}){ return ( Array(total).fill(0).map((item) =>
  • <Skeleton circle width={40} className={`TodoSkeleton-icon-container`}/>
    <Skeleton circle width={40} baseColor='#CBCBCB' className={`TodoSkeleton-icon-container TodoSkeleton-deleteIcon`}/>
  • ) ); } export { TodoLoading } ```import './TodoLoading.css';import Skeleton from 'react-loading-skeleton'import 'react-loading-skeleton/dist/skeleton.css'; function TodoLoading({total}){ return ( Array(total).fill(0).map((item) => \
  • \
    \<Skeleton circle width={40} className={`TodoSkeleton-icon-container`}/> \
    \
    \<Skeleton circle width={40} baseColor='#CBCBCB' className={`TodoSkeleton-icon-container TodoSkeleton-deleteIcon`}/> \
    \
  • ) ); } export { TodoLoading }

    Reutilizando c贸digo del curso del **Curso Pr谩ctico de Maquetaci贸n y Animaciones con CSS **. Les dejo mi proyecto y mi github.

    As铆 va mi proyecto :D ![]()![](https://i.postimg.cc/yxcfV7ks/React-Project.gif) Tambi茅n les recomiendo estos blogs para saber m谩s sobre loading skeletons: * <https://www.freecodecamp.org/news/how-to-build-skeleton-screens-using-css-for-better-user-experience/> * <https://flowbite.com/docs/components/skeleton/> * ![]()https://www.smashingmagazine.com/2020/04/skeleton-screens-react/
    ![](https://cdn.discordapp.com/attachments/1109505527207174214/1161454391245688893/Untitled_design.gif?ex=65385bb1\&is=6525e6b1\&hm=734a346bdb84047652d7d5da8a5d0345e82372bfa547ad426683196a39972093&)Creo que esto no tiene nada que ver con loading skeletons pero es la 煤nica forma que se me ocurri贸 que iba con mi "dise帽o" xd ```js import "./TodoLoading.css"; import pen from "./pen.png" function TodoLoading({ status }) { if (status === "Loading") return (
    ); } export { TodoLoading }; ``````css .pensil-Img-Container { position: absolute; top: 18px; animation: zigzagHorizontal 3s linear infinite; } .pensil-Img { width: 10%; height: auto; margin: 0; } @keyframes zigzagHorizontal { 0% { transform: translateX(0) translateY(0); } 8% { transform: translateX(20px) translateY(-10px); } 16% { transform: translateX(40px) translateY(0); } 24% { transform: translateX(60px) translateY(-10px); } 32% { transform: translateX(80px) translateY(0); } 40% { transform: translateX(100px) translateY(-10px); } 48% { transform: translateX(120px) translateY(0); } 56% { transform: translateX(140px) translateY(-10px); } 64% { transform: translateX(160px) translateY(0); } 72% { transform: translateX(180px) translateY(-10px); } 80% { transform: translateX(200px) translateY(0); } 88% { transform: translateX(220px) translateY(-10px); } 100% { transform: translateX(240px) translateY(0); } } ```

    mi solucion al reto

    Le pedi a chatGPT, que me hiciera la pagina con taildwind y react, cuando estuviera cargando:
    Esta es su respuesta, a mi me gusto

    import React from 'react';
    
    const LoadingPage = () => {
      return (
        <div className="min-h-screen flex items-center justify-center bg-gray-900 text-white">
          <div className="animate-pulse">
            <div className="w-20 h-20 rounded-full bg-blue-500"></div>
            <div className="mt-4 flex justify-center space-x-2">
              <div className="w-4 h-4 rounded-full bg-blue-500"></div>
              <div className="w-4 h-4 rounded-full bg-blue-500"></div>
              <div className="w-4 h-4 rounded-full bg-blue-500"></div>
            </div>
          </div>
        </div>
      );
    };
    
    export default LoadingPage;
    
    

    Aqui les dejo mi metodo, quise hacerlo de esta forma para evitar poner tanto codigo en AppUI.jsx y pues creo que a la hora de hacer responsive los dise帽os o proyectos con mas contenido no aplicar tres si no numero mayor de skeletons (por llamarlos de alguna forma) aunque me fuese gustado aplicar una logica en la que colocando una etiqueta <li> pueda renderizar N canidades de veces para llenar todo los espacios necesarios tal cual lo hace Youtube a la hora de cargar鈥

    Mi soluci贸n la hice as铆:

    Estoy utilizando Sass en mi caso porque se me hace mas facil hacer CSS

    TodosLoading.js

    En este solamente cree un span y lo multiplique en varios al hacer return

    import React from "react";
    
    function TodosLoading() {
      const TodoLoading = () =>
       <span className="todosLoading"></span>
        return (
          <>
          <TodoLoading />
          <TodoLoading />
          <TodoLoading />
          <TodoLoading />
          <TodoLoading />
          </>
        )
      }
    
    export { TodosLoading };
      
    

    CSS o SASS

    En mi caso estoy utilizando Sass y al archivo donde puse el skeleton decid铆 llamar TodosLoading.scss y esta compuesto de esta manera el cual va a mostrar una bonita animacion de carga que va de arriba y hacia abajo apareciendo y desapareciendo los elementos

    @keyframes loading-skeleton {
        0%, 100% {
          opacity: 100%;
        }
        50% {
          opacity: 0%;
        }
    }
    
    .todosLoading {
        height: 60px;
        width: auto;
        background: $todoLoading;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 2px 10px 2px 10px;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        animation: loading-skeleton infinite 1.5s;
    
        &:nth-child(2) {
            animation-delay: .2s;
        }
    
        &:nth-child(3) {
            animation-delay: .4s;
        }
    
        &:nth-child(4) {
            animation-delay: .2s;
        }
    
        &:nth-child(5) {
            animation-delay: .4s;
        }
    

    Yo lo hice de la siguiente manera que me parecio que es mucho mas facil

    Codigo para la parte de TodosLoading.js
    
    import React from "react";
    import '../styles/TodosLoading.css'
    import 'bootstrap/dist/css/bootstrap.min.css';
    import {Spinner} from 'reactstrap';
    function TodosLoading(){
        return(
            <div className="container-loading">
                <div className="loading">
                <Spinner color= "primary" />
                </div>
            </div>
        );
    }
    
    export {TodosLoading}; 
    
    

    antes de ejecutarlo recuerden que hay que instalar las dependencias que se hace con el siguiente comando

    npm i bootstrap reactstrap
    
    c贸digo para la parte de css 
    
    .container-loading {
        height: 100vh;
        position: relative;
    }
    
    .loading {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    

    hay ya el loading quedar铆a centralizado y para mi se ver铆a mucho mas chimbita jejej 馃槑

    pda: No agrego im谩genes porque no se como carajos ponerlas (Si alguien sabe que me explique por favor 馃槩)

    Yo estoy utilizando MUI, as铆 que implement茅 el componente Skeleton.

    export const TodoLoading = () => {
      return (
        <Box>
          <Skeleton variant='text' width={350} height={40}  />
          <Skeleton variant='text' width={350} height={40}  />
          <Skeleton variant='text' width={350} height={40}  />
          <Skeleton variant='text' width={350} height={40}  />
        </Box>
       
      )
    }
    
    

    Skeleton

    Aqui dejo mi solucion al TodosLoading, he instalado Chakra UI y Framer-Motion para crearlo:

    import { Box, Spinner } from '@chakra-ui/react'
    
    function ToDosLoading() {
        return (
            <Box className='w-16 h-16 mb-12' >
                <Spinner
                    thickness='4px'
                    speed='0.65s'
                    color='#000000'
                    emptyColor='#707070'
                    height={'100%'}
                    width={'100%'}
                />
            </Box>
        )
    }
    
    export default ToDosLoading```
    
    este fue mi resultado. use ayuda de una pagina que encontr茅 googleando : <https://loading.io/css/> en dicha pagina hab铆an excelentes opciones para un loading este fue el resultado.![](https://static.platzi.com/media/user_upload/image-797a55b2-7b3e-4446-ae5e-d5fdb22f7242.jpg)
    Yo hice la animaci贸n ligeramente diferente. ```css .LoadingTodo-container, .LoadingTodo-completeIcon, .LoadingTodo-deleteIcon { background: linear-gradient(0.25turn, transparent, #FFF, transparent), linear-gradient(#DDD, #DDD), radial-gradient(38px circle at 19px 19px, #DDD 50%, transparent 51%), linear-gradient(#DDD, #DDD); background-size: 400% 400%; animation: loadingAnimation 3s ease-in-out infinite; } @keyframes loadingAnimation { 0% { background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px; } 100% { background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px; } } ```
    Reto de TodoCounter ```js import React from "react"; import "./TodoCounter.css"; function TodoCounter({ total, completed }) { let message; const messageSpan = <>Has completado {completed} de {total} TODOs if (total === 0) { message = "No hay tareas pendientes."; } else if (total === completed) { message = "馃帀隆Felicidades, completaste todos los TODOs!馃帀"; } else { message = messageSpan; } return <h1 className="TodoCounter">{message}; } export { TodoCounter }; ```import React from "react";import "./TodoCounter.css"; function TodoCounter({ total, completed }) {聽 聽 let message;聽 聽 const messageSpan = <>Has completado \{completed}\ de \{total}\ TODOs\ 聽 聽 if (total === 0) {聽 聽 聽 聽 message = "No hay tareas pendientes.";聽 聽 } else if (total === completed) {聽 聽 聽 聽 message = "馃帀隆Felicidades, completaste todos los TODOs!馃帀";聽 聽 } else {聽 聽 聽 聽 message = messageSpan;聽 聽 } return \<h1 className="TodoCounter">{message}\;} export { TodoCounter };

    De esta forma va mi estado de carga en mi todo App

    As铆 quedo el m铆o, lo saqu茅 de \[uiverse.io]\(https://uiverse.io/vk-uiux/neat-goat-26) 馃憖 : ![](https://i.postimg.cc/vB5NFh17/demo-loading-todo-app.gif) ```js import '../../assets/App.css' const TodosLoading = () => { return (
    ) } export { TodosLoading } ``````css .todo__item--loading { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; border-bottom: 0.1rem solid lightgray; } .todo__item--loading { height: 40px; margin-bottom: 3px; background-image: linear-gradient( 90deg, #ccc 0px, rgb(229 229 229 / 90%) 40px, #ccc 80px ); background-size: 300%; background-position: 100% 0; border-radius: 5px; animation: shimmer 1.6s infinite; } @keyframes shimmer { to { background-position: -100% 0; } } ```
    ![](https://static.platzi.com/media/user_upload/image-f084abbe-7b06-4269-8f60-719330010233.jpg) Este es mi componente de loading, las barras cambian de tama帽o de manera secuencial
    Asi quedo mi pantalla de carga, con una animacion en el titulo y la lista de todo's ![](https://static.platzi.com/media/user_upload/Screenshot%202023-11-25%20at%2022-45-32%20React%20App-736bfdf4-4dbd-44a8-8e97-40a24fbd935a.jpg)
    Hola, dejo mi aporte de Skeleton -> Todos tienen movimiento, saludos. cargando: ![](https://static.platzi.com/media/user_upload/imagen-33b730fc-f21b-49e6-abea-dcf37a3a7db6.jpg) cargado OK: ![](https://static.platzi.com/media/user_upload/imagen-6bb63678-706c-4786-9cd4-40685e68206f.jpg) error de localStore (gira el astronauta): ![](https://static.platzi.com/media/user_upload/imagen-39e94c4a-e509-49b0-99a5-de0d8b05f121.jpg) sin TODOS: ![](https://static.platzi.com/media/user_upload/imagen-0384e733-d847-423d-bb1d-02cba38d8b2f.jpg) Muchas gracias, quedo abierto a opiniones y sugerencias.

    [](C:\Users\User\Pictures\Screenshots\Captura de pantalla 2023-10-24 084951.png)

    import React from 'react';
    import { Bars  } from 'react-loader-spinner';
    
    import './TodosLoanding.css';
    
    function TodosLoading() {
      return (
        <div className="loader-container">
          <Bars 
            color="#00BFFF"
            height={100}
            width={100}
            timeout={3000}
          />
          <p>Cargando...</p>
        </div>
      );
    }
    
    export { TodosLoading };
    
    
    .loader-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 50vh;
      }
      
      .loader-container p {
        margin-top: 0px;
      }
      
    
    Yo utilice est谩 herramienta [react-loading-skeleton - npm (npmjs.com)](https://www.npmjs.com/package/react-loading-skeleton)
    buenos d铆as, necesito comparar mi c贸digo con lo que estamos viendo en clase, pero con la actualizaci贸n los "recursos" est谩n vac铆os