¿Cómo crear una pantalla de carga en ReactJS?

En este artículo, vamos a aprender cómo podemos crear una pantalla de carga en ReactJs. Una pantalla de carga es una imagen que muestra un programa de computadora, a menudo un videojuego, mientras el programa se está cargando o inicializando.

React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

Enfoque: para crear nuestra pantalla de carga, vamos a utilizar el paquete de carga reactiva porque es potente, liviano y totalmente personalizable. Después de eso, agregaremos diferentes tipos de pantallas de carga en nuestra página de inicio usando el paquete instalado.

Crear aplicación ReactJS: puede crear un nuevo proyecto ReactJs usando el siguiente comando:

npx create-react-app gfg

Instale el paquete requerido: ahora instalaremos el paquete de carga de reacción usando el siguiente comando:

npm i react-loading

Estructura del proyecto: Se verá así.

Agregar pantalla de carga: en este ejemplo, agregaremos la carga de reacción en la página de inicio de nuestra aplicación usando el paquete que instalamos. Para ello, agregue el siguiente contenido en el archivo App.js.

import React from "react";
import ReactLoading from "react-loading";
  
export default function Loading() {
  return (
    <div>
      <h2>Loading in ReactJs - GeeksforGeeks</h2>
      <ReactLoading type="balls" color="#0000FF" 
        height={100} width={50} />
      <ReactLoading type="bars" color="#0000FF"
        height={100} width={50} />
      <ReactLoading type="bubbles" color="#0000FF"
        height={100} width={50} />
      <ReactLoading type="cubes" color="#0000FF"
        height={100} width={50} />
      <ReactLoading type="cylon" color="#0000FF" 
        height={100} width={50} />
      <ReactLoading type="spin" color="#0000FF"
        height={100} width={50} />
      <ReactLoading type="spokes" color="#0000FF"
        height={100} width={50} />
      <ReactLoading
        type="spinningBubbles"
        color="#0000FF"
        height={100}
        width={50}
      />
    </div>
  );
}

Explicación: en el ejemplo anterior primero, estamos importando el componente ReactLoading del paquete de carga de reacción. Después de eso, estamos usando nuestro componente ReactLoading para agregar diferentes tipos de pantallas de carga. Podemos configurar el tipo, el color, la altura y el ancho de la pantalla de carga.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm start

Producción: