Accesorios de React Suite Loader <Loader>

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. Hay una gran cantidad de datos que se representan en una página web. A veces lleva tiempo cargar los datos. Aquí es cuando el componente Loader permite al usuario mostrar el efecto de carga. Se puede utilizar para mostrar el estado de carga, siempre que se requiera en nuestra aplicación.

Las propiedades disponibles de Loader son:

• center: Es un valor booleano. Se utiliza para hacer componentes centrados en el contenedor.
• telón de fondo: Es un valor booleano. Se utiliza para decidir si mostrar el fondo o no.
• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
• contenido: Se utiliza para configurar el contenido del cargador.
• inversa: Es un valor booleano. Se utiliza para denotar el estilo visual oscuro alternativo para el cargador.
• tamaño: Se utiliza para establecer las dimensiones del cargador.
• velocidad: Se utiliza para denotar la velocidad de rotación del cargador.
• vertical: Es un valor booleano. Se utiliza para indicar si el icono se muestra verticalmente con el texto o no.

Enfoque: Vamos a crear un proyecto React e instalar el módulo React Suite. Luego, crearemos una interfaz de usuario que mostrará React Suite Loader Props .

Creando proyecto React:

Paso 1: para crear una aplicación de reacción, debe instalar los módulos de reacción a través del comando npx. Se usa «npx» en lugar de «npm» porque necesitará este comando en el ciclo de vida de su aplicación solo una vez.

npx create-react-app project_name

Paso 2: después de crear su proyecto de reacción, muévase a la carpeta para realizar diferentes operaciones.

cd project_name

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: después de ejecutar los comandos mencionados en los pasos anteriores, si abre el proyecto en un editor, puede ver una estructura de proyecto similar a la que se muestra a continuación. El nuevo componente que el usuario crea o los cambios de código que realizaremos se realizarán en la carpeta de origen.

Estructura del proyecto

Ejemplo 1: estamos creando una interfaz de usuario que muestra diferentes cargadores medianos de React Suite de diferentes velocidades, es decir, rápido, lento y normal.

import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import { Loader } from 'rsuite';
  
export default function App() {
  return (
    <div>
      <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
      <h1>React Suite Loader Props</h1> <br></br>
      <Loader size="md" speed="slow" content="Slow" />
      <hr />
      <Loader size="md" speed="normal" content="Normal" />
      <hr />
      <Loader size="md" speed="fast" content="Fast" />
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida:

Cargador de React Suite

Ejemplo 2: estamos creando una interfaz de usuario que muestra el cargador de velocidad normal de React Suite de diferentes tamaños.

import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import { Loader } from 'rsuite';
  
export default function App() {
  return (
    <div style={{ margin: 100 }}>
      <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
      <h1>React Suite Loader Props</h1> <br></br>
      <Loader size="xs" speed="normal" content="Xsmall Loader" />
      <hr />
      <Loader size="sm" speed="normal" content="Small Loader" />
      <hr />
      <Loader size="md" speed="normal" content="Medium Loader" />
      <hr />
      <Loader size="lg" speed="normal" content="Large Loader" />
    </div>
  );
}

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida:

Cargador de React Suite

Referencia : https://rsuitejs.com/components/loader/#code-lt-loader-gt-code