¿Cómo usar la animación de carga usando react-loader-spinner a través de npm?

El spinner , que se proporciona para ser utilizado en proyectos, tiene

Aquí para el cargador, vamos a usar el paquete npm llamado react-loader-spinner . Es un paquete para cargadores. Para un conocimiento más profundo, puede visitar el siguiente enlace.

https://www.npmjs.com/package/react-loader-spinner

Sintaxis:

<Loader
  type="Spinner Type"
  color="rgb color"
  height={number}
  width={number}
  timeout={number in ms}
/>;

Tipos de spinner: todos los tipos de spinner se pueden usar de manera similar, solo necesita cambiar el tipo de cargador.

• Audio
• bola-triángulo
• Barras
• círculos
• Cuadrícula
• Corazones
• Oval
• Soplo
• Anillos
• Caída en barrena
• Tres puntos

PropTypes: Todos los tipos de spinner aceptan estos accesorios.

• define lo falso
• hilandero
• hilandero
• hilandero
• propel
• define el

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree la aplicación React usando el comando.

•  

npx create-react-app foldername 

Paso 2: ahora muévase a la carpeta de su proyecto, es decir, el nombre de la carpeta usando este comando.

•  

cd foldername

Paso 3: ahora instale el paquete en la carpeta de su proyecto.

•  

npm install react-loader-spinner

Paso 4: ahora cree un nuevo archivo en su carpeta src, es decir, loader.js

Estructura del proyecto: Se verá así. Aquí el nombre de nuestra carpeta es react_loader.

Ejemplo: en este ejemplo, crearemos un spinner de carga, para eso, ya hemos creado un archivo de componente que es loader.js. Llamaremos al archivo loadr.js a nuestro archivo de representación principal App.js

Aplicación.js