Velocidad del cargador de React Suite

React suite es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre React Suite Loader Speed. Un cargador es un componente que proporciona el estado durante la carga de datos y el cargador también se puede usar con una descripción personalizada. Un cargador puede tener diferentes velocidades, es decir , rápido , normal y lento .

Puntales del cargador:

• telón de fondo: Indica si se muestra el fondo.
• center: Hace que los componentes estén centrados en el contenedor.
• classPrefix: Denota el prefijo de la clase CSS del componente.
• content: Agrega un texto descriptivo personalizado.
• inverse: Denota el estilo visual oscuro alternativo para el Loader.
• tamaño: Establece las dimensiones del cargador.
• velocidad: Denota la velocidad a la que gira el cargador.
• vertical: Indica si el icono se muestra verticalmente con el texto o no.

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

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2: después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Sintaxis:

import Loader from 'rsuite/Loader';
function App() {
    <Loader speed="fast || normal || slow" />
}

Ejemplo 1: El siguiente ejemplo demuestra la velocidad rápida del cargador.

import { Loader } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Loader Speed
                </h4>
                <div style={{ 
                    marginTop: 20, 
                    width: 400 
                }}>
                    <Loader 
                        content="Fast loading..." 
                        speed="fast" />
                </div>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra la velocidad normal del cargador.

import { Loader } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Loader Speed
                </h4>
                <div style={{ 
                    marginTop: 20, 
                    width: 400 
                }}>
                    <Loader 
                        content="Normal loading..." 
                        speed="normal" />
                </div>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 3: El siguiente ejemplo demuestra la velocidad lenta del cargador.

import { Loader } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Loader Speed
                </h4>
                <div style={{ 
                    marginTop: 20, 
                    width: 400 
                }}>
                    <Loader 
                        content="Slow loading..." 
                        speed="slow" />
                </div>
            </div>
        </center>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/loader/#speed