Accesorios del cargador de React Suite

React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. El componente React Suite Loader aparece en la pantalla cada vez que se carga cualquier estado. Se utiliza para proporcionar una buena experiencia de usuario.

Sintaxis:

<Loader/>

Puntales del cargador:

• vertical: Es un booleano que muestra el texto y el icono en forma vertical. Es cierto por defecto.
• inverse: es un booleano que proporciona un estilo oscuro alternativo para el cargador. Es cierto por defecto.
• telón de fondo: Es un booleano. Difumina el fondo. Es cierto por defecto.
• centro: Es un booleano. Muestra el cargador en el centro. Es cierto por defecto.
• classPrefix: Esto muestra el prefijo de la clase CSS del componente, es decir, el estilo predeterminado. 
• contenido: Muestra un texto descriptivo personalizado junto con el icono.
• tamaño: establece el tamaño del componente del botón.
  • xs: El tamaño más pequeño que está disponible.
  • sm: Es una talla pequeña un poco más grande que la talla xs.
  • md: El tamaño mediano que es más grande que el sm.
  • lg: El tamaño más grande disponible.
• velocidad: Define la velocidad a la que gira el cargador. Las alternativas disponibles son “rápida”, “lenta”, “normal”.

Requisito previo: Introducción e instalación de reactJs

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

Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o puede instalarlo localmente con npm i create-react-app.

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Paso 3:  ahora instala la dependencia usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Se verá así:

 

Ejemplo 1: en este ejemplo, estamos importando el componente Loader desde «rsuite». Estamos agregando tres cargadores con tamaño y velocidad variables usando el accesorio de tamaño y velocidad. También estamos mostrando un texto asociado con el cargador usando el accesorio de contenido.

Nota: Para agregar los estilos predeterminados, estamos importando «rsuite/dist/rsuite.min.css».

import { Loader } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    return (
        <div className="App">
            <h3> React Suite Loader</h3>
            <Loader content="speed=fast and size=large" 
                speed="fast" size="lg" />
            <hr />
            <Loader content="speed=slow and size=small"
                 speed="slow" size="sm" />
            <hr />
            <Loader content="speed=normal and size=medium"
                speed="normal" size="md" />
        </div>
    );
}
  
export default App;

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

npm start

Producción:

 

Ejemplo 2: En este ejemplo, estamos creando un div con una altura de 50 px, estamos agregando un componente de cargador con el accesorio inverso y otro con el centro y el accesorio vertical, el formulario alinea el cargador en el centro de la pantalla y el este último alinea el contenido verticalmente.

import { Loader } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    return (
        <div className="App">
            <h3> React Suite Loader</h3>
  
            <div style={{ height: "50px", 
                backgroundColor: "green" }}>
                <Loader inverse content="inverse" />
                <Loader center content="center" vertical />
            </div>
        </div>
    );
}
  
export default App;

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

npm start

Producción:

 

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