Bootstrap 5 hilanderos

Posted on by Rudeus Greyrat

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:

borde giratorio

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:

spinner-crecer

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:

Agregando margen a los spinners de Bootstrap

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:

Colocando los Spinners usando las Clases Bootstrap

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:

Disminución del tamaño de los hilanderos Bootstrap

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:

Aumentar el tamaño de Bootstrap Spinners usando CSS en línea

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *