Un control giratorio se utiliza para mostrar el estado de carga de una página o una sección en nuestros proyectos. Básicamente se usa cuando la página está esperando datos asíncronos o durante un proceso de renderizado, una animación de carga adecuada puede mitigar efectivamente la incomodidad de los usuarios.
Ant Design Library tiene este componente prediseñado y también es muy fácil de integrar. Podemos usar este componente Spin usando el siguiente enfoque fácilmente.
Sintaxis:
<Spin />
Propiedad de giro:
- retraso: Define un retraso en milisegundos para la animación de carga.
- indicador: Node de reacción del indicador giratorio.
- tamaño: Define el tamaño de la ruleta, es decir, pequeño, predeterminado y grande.
- spinning: Es un valor booleano que define si el giro debe girar o no.
- Consejo: personalice el contenido de la descripción cuando Spin tenga hijos.
- wrapperClassName: especifica el nombre de clase del contenedor cuando Spin tiene hijos.
Creando la aplicación React:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app demo
Paso 2: después de crear la aplicación React, acceda a ella con el siguiente comando:
cd demo
Paso 3 : Ahora instale la biblioteca antd usando el siguiente comando:
npm install antd
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
import { Spin } from "antd";
import "./App.css";
import "antd/dist/antd.css";
function App() {
return (
<div className="App">
<div style={{ padding: "100px" }}>
<h1 style={{ marginBottom: "2rem" }}>
Demo for Spin
</h1>
<Spin size="large" />
</div>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: Ejecute la aplicación usando 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.
Referencia: https://ant.design/components/spin/