Hola a todos,  Estaba encontrando una buena manera de hacer una pantalla de carga/animación para mi pequeña aplicación React, y encontré 3 formas diferentes de hacer buenas pantallas de carga,    : Usando la biblioteca   . Tipo-1 de carga de reacción    : Uso de la biblioteca   . Tipo-2 react-lottie    : usando   simple. Tipo-3 CSS  Si prefiere ver el video tutorial, puede verlo aquí; de lo contrario, solo mire los primeros 2 minutos para tener una idea de lo que vamos a construir aquí... ¡y siga leyendo!😄   Empecemos a Construir...  Crea tu aplicación de reacción con,    npx create-react-app React-Loading-Screen  A continuación, instale dos bibliotecas que vamos a utilizar.    npm install react-loading react-lottie    Aquí, estoy usando   para obtener datos, para mostrar cómo podemos usar el precargador cuando usamos la API. NOTA: la API jsonplaceholder  Tipo 1  Cree un archivo separado como PreLoader1.js.  Cree un componente funcional y aquí, vamos a usar dos estados,     [data, setData] = useState([]);   [done,setDone]=useState(   ); const const undefined    : para almacenar datos que provienen de la llamada API. estado de datos    : es booleano para decidir el clima para mostrar el precargador o no. estado hecho  Ahora en el efecto de uso,   useEffect(   { setTimeout(   { fetch(   ) .then(   response.json()) .then(   {   .log(json); setData(json); setDone(   ); }); },   ); }, []);  => ()  => () "https://jsonplaceholder.typicode.com/posts" (   ) => response (   ) => json console true 2000  Puedes poner tu propia lógica en useEffect!  Ahora en el método useEffect anterior,  Primero usamos el método de búsqueda para obtener datos de API, luego convertimos esos datos en json, luego estableceremos el estado de datos con datos json, y luego estableceremos el estado hecho en verdadero.  NOTA: Aquí he usado la función de tiempo de espera durante 2 segundos para que podamos ver la pantalla de carga durante más tiempo.  Ahora rendericemos nuestro componente.     comprobaremos si  el estado es falso, entonces representaremos el componente de precarga; de lo contrario, representaremos los datos que queremos mostrar. Línea 22:   done    aquí he usado la biblioteca de carga reactiva, donde solo tenemos que establecer el tipo, el color, la altura y el ancho. Puedes encontrar más funcionalidades en   Línea 23: aquí    desde aquí he mapeado el estado de los datos dentro de la etiqueta ul que devuelve el título de cada publicación en la etiqueta li.  Línea 30: (use console.log() dentro de useEffect para ver qué tipo de datos estamos obteniendo)  Ese es el final de la Parte 1 aquí.   Tipo 2  Cree un nuevo archivo y asígnele el nombre PreLoader2.js  Cree un componente funcional e importe la biblioteca react-Lottie.     Lottie    import from "react-lottie"  En este tipo de pantalla de carga tenemos que descargar archivos de animación desde  https://lottiefiles.com/  Para este tutorial estoy usando debajo de dos archivos,  Animación de la Tierra:  https://lottiefiles.com/1055-world-locations  Animación de éxito:  https://lottiefiles.com/1127-success  Descargue este archivo (Lottie JSON) y guárdelo en el directorio de su proyecto.  Importemos estos archivos json como a continuación,     *   location     ;   *   success     ; import as from "../1055-world-locations.json" import as from "../1127-success.json"  Como se menciona   en la documentación de la biblioteca react-Lottie, debemos establecer opciones predeterminadas para usar estos archivos de animación en nuestro proyecto, así que primero declare estas opciones como,  aquí    defaultOptions1 = {   :   ,   :   ,   : location.default,   : {   :   , }, };   defaultOptions2 = {   :   ,   :   ,   : success.default,   : {   :   , }, }; const loop true autoplay true animationData rendererSettings preserveAspectRatio "xMidYMid slice" const loop true autoplay true animationData rendererSettings preserveAspectRatio "xMidYMid slice"    para el primer archivo mientras que   para el segundo archivo. defaultOptions1 defaultOptions2  En este tutorial vamos a usar 3 estados:     [data, setData] = useState([]);   [loading, setloading] = useState(   );   [completed, setcompleted] = useState(   ); const const undefined const undefined    : para almacenar datos que provienen de la llamada API. estado de datos  estado de   booleano para el primer archivo de animación. carga: estado    booleano para el segundo archivo de animación cuando se completa la llamada a la API.  estado completado: estado   useEffect(   { setTimeout(   { fetch(   ) .then(   response.json()) .then(   {   .log(json); setData(json); setloading(   ); setTimeout(   { setcompleted(   ); },   ); }); },   ); }, []);  => ()  => () "https://jsonplaceholder.typicode.com/posts" (   ) => response (   ) => json console true  => () true 1000 2000  Puedes poner tu propia lógica en useEffect!  El método UseEffect es casi el mismo que en la parte 1, la única diferencia es que, en lugar del estado terminado, tenemos que establecer el estado completado y cargando en verdadero,  Además, he usado una función de tiempo de espera más durante 1 segundo para ver la segunda animación.     (   <Lottie options={defaultOptions1} height={200} width={200} /> ) : ( <Lottie options={defaultOptions2} height={100} width={100} /> )} </> ) : ( <> <h1>Your Data</h1> </> )} </> ); } return  {!completed ? (   {!loading ? ( <> <>  Como se muestra en el código anterior,  en la devolución, si el estado completado es falso, mostraremos la pantalla de carga; de lo contrario, mostraremos nuestros datos.  En la parte de animación haremos una representación condicional más,  cuando el estado de carga es falso, representaremos la animación de la tierra; de lo contrario, representaremos la animación de éxito.  No olvides configurar  para el archivo 1 y  para el archivo 2.   options={defaultOptions1}   options={defaultOptions2}  Código completo:   Ahora, según la licencia Creative Commons de    https://lottiefiles.com/page/license , los creadores deben atribuirse en su solicitud.  Puede atribuir al creador como se muestra en las líneas 60 a 71.  Ese es el final de la Parte 2.   Tipo-3  En este tipo, no vamos a usar ninguna biblioteca, sino que solo usamos un estilo css simple.  Ahora, la lógica de mostrar el precargador es la misma que en la parte 2, así que aquí no les mostraré todo el proceso.  Crear nuevo archivo PreLoader3.js  Copie todo el código del archivo PreLoader2.js y elimine todo el código relacionado con la biblioteca react-Lottie y mantenga todo como está.  solo cambie la declaración de devolución como se muestra a continuación,     (   <div className="spinner"> <span>Loading...</span> <div className="half-spinner"></div> </div>   <div className="completed">&#x2713;</div>   <h1>Your Data</h1>  return  {!completed ? (   {!loading ? ( <> <> ) : ( )}   ) : (  </> <>  )}   ); </> </>  En el código anterior,  div con la clase spinner contiene Loading text y spinner.  mientras que div con el nombre de clase completado contiene el símbolo de éxito (✓).  Ahora hagamos un poco de estilo css.  cree un archivo separado preloader3.css para diseñarlo e impórtelo en el archivo preloader3.js.   Ahora,  La clase   es simplemente caja para spinner. .spinner    contiene estilos y animaciones para cargar texto. .spinner span    contiene estilos para spinner. .half-spinner  ahora, para cortar toda esta rueda giratoria como en la línea n. ° 20, solo tiene que configurar el borde superior en transparente.    contiene estilo y animación para el símbolo de éxito (✓). .completed  Este es el Fin del tipo 3.  Puede encontrar el repositorio de código completo desde   . aquí    😄 Gracias por leer y apoyar.  Siéntete libre de visitar mi canal de youtube:   @CodeBucks       Publicado anteriormente aquí .

Fetch

YouTube

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

Guía paso a paso para crear 3 tipos diferentes de pantallas de carga en React

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Telegram: el puente de Crypto Island hacia el continente

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Telegram: el puente de Crypto Island hacia el continente

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps