En este artículo, vamos a aprender cómo podemos agregar un cargador giratorio en NextJs. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac.
Enfoque: para agregar nuestro cargador giratorio, vamos a utilizar el paquete react-loader-spinner. El paquete react-loader-spinner nos ayuda a integrar el cargador giratorio en nuestra aplicación. Primero, instalaremos el paquete react-loader-spinner y luego agregaremos un cargador giratorio en nuestra página de inicio.
Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:
npx create-next-app gfg
Instale el paquete requerido: ahora instalaremos el paquete react-loader-spinner usando el siguiente comando:
npm i react-loader-spinner
Estructura del proyecto: Se verá así.
Agregar el cargador giratorio: después de instalar el paquete, podemos agregar fácilmente un cargador giratorio en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar un cargador a nuestra página de inicio.
index.js
import React from 'react'; import Loader from "react-loader-spinner"; import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"; export default function SpinnerLoading(){ return ( <div> <h2>NextJs Spinner Loader - GeeksforGeeks</h2> <Loader type="Puff" color="#00BFFF" height={100} width={100} timeout={3000} /> </div> ) }
Explicación: En el ejemplo anterior primero, estamos importando el componente Loader y luego, estamos usando el componente Loader en una nueva función para agregar nuestro cargador Spinner. También establece el color, la altura, el peso y el tiempo de espera en el componente Loader.
Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.
npm run dev
Producción:
Publicación traducida automáticamente
Artículo escrito por imranalam21510 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA