En este artículo, implementaremos spinners en el sitio web usando Bootstrap y también veremos la implementación de diferentes tipos de spinners a través del ejemplo. Los spinners se utilizan para especificar el estado de carga de un componente o página web. Bootstrap facilita las diversas clases para crear diferentes estilos de hilanderos modificando la apariencia, el tamaño y la ubicación.
Sintaxis:
- Para el borde giratorio:
<div class="spinner-border" role="status"></div>
- Para spinner-cultivo:
<div class="spinner-grow" role="status"></div>
Enfoque: Usaremos un elemento div para los spinners y declararemos las clases de arranque llamadas spinner-border y spinner-grow, dentro de la sección div para usar los spinners . La clase spinner-border se usa para rotar el spinner y el spinner-grow es utilizado para el cultivo de hilanderos. Se utilizan para mostrar que algún contenido se está cargando.
Ejemplo 1: Este ejemplo ilustra el borde giratorio en Bootstrap.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1 class="text-success text-center"> GeeksforGeeks </h1> <h4 class="text-info text-center"> Bootstrap Spinner Border </h4> <div class="d-flex justify-content-center"> <div class="spinner-border text-secondary" role="status"> </div> <span>Please Wait </span> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo describe el spinner-grow en Bootstrap.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1 class="text-success text-center"> GeeksforGeeks </h1> <h4 class="text-info text-center"> Bootstrap Spinner Grow </h4> <div class="d-flex justify-content-center"> <span> <h5>Processing</h5> </span> <div class="spinner-grow text-primary" role="status"> </div> </div> </body> </html>
Producción:
Ahora aprenderemos cómo alinear los giradores en la página web según nuestras necesidades.
Alineación
Margen
Podemos agregar margen a los giradores en Bootstrap usando la clase de utilidades de margen en Bootstrap. Aquí hay un ejemplo dado a continuación:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1 class="text-success text-center"> GeeksforGeeks </h1> <h4 class="text-info text-center"> Adding margin to Bootstrap Spinners </h4> <div class="spinner-border m-5" role="status"> </div> </body> </html>
Producción:
Colocación
Podemos colocar la rueda giratoria en diferentes posiciones, como el centro, el final o el inicio, utilizando la colocación de texto o las clases de cuadro flexible. A continuación se muestra el ejemplo en el que hemos utilizado flexbox y clases de colocación de texto:
Código:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1 class="text-success text-center"> GeeksforGeeks </h1> <h4 class="text-info text-center"> Spinner Placement using Bootstrap classes </h4> <h4 class=" text-center"> Using the Text Placement Classes </h4> <div class="text-center"> <div class="spinner-border m-5 " role="status"> </div> </div> <h4 class="text-center"> Using the Flex Box Classes </h4> <div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> </div> </div> </body> </html>
Producción:
Tamaño
También podemos ajustar el tamaño de los spinners según nuestras necesidades utilizando las clases de Bootstrap o utilizando el estilo CSS en línea.
Podemos agregar las clases .spinner-border-sm y .spinner-grow-sm para hacer spinners más pequeños que puedan caber dentro de diferentes componentes. Aquí hay un ejemplo:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1 class="text-success text-center"> GeeksforGeeks </h1> <div class="text-center"> <h3>Making smaller Spinners using the Bootstrap Classes</h3> <div class="spinner-border spinner-border-sm" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow spinner-grow-sm" role="status"> <span class="visually-hidden">Loading...</span> </div> </div> </body> </html>
Producción:
También podemos aumentar o disminuir el tamaño de los giradores utilizando el estilo CSS en línea definiendo los atributos de ancho y alto. Aquí hay un ejemplo en el que aumentamos el tamaño de la rueda usando el estilo CSS en línea:
Código:
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h2>Welcome To GFG</h2> <p>Default code has been loaded into the Editor.</p> </body> </html> a<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1 class="text-success text-center"> GeeksforGeeks </h1> <div class="text-center"> <h3>Increasing the size of Spinners using inline CSS</h3> <div class="spinner-border" style="width: 4rem; height: 4rem;" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow" style="width: 4rem; height: 4rem;" role="status"> <span class="visually-hidden">Loading...</span> </div> </div> </body> </html>
Producción:
Navegadores compatibles:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA