Arranque 4 | Hilanderos

Posted on by Rudeus Greyrat

Bootstrap proporciona varias clases para crear diferentes estilos de «spinner» para mostrar el estado de carga de los proyectos. Estas clases están integradas con HTML y CSS, por lo que no es necesario escribir JavaScript para crearlas. También podemos modificar la apariencia, el tamaño y la ubicación de los giradores con las clases proporcionadas por Bootstrap.
Tipos de Spinner: 
 

  • Rueda de borde : podemos crear una rueda de borde ligera usando la clase .spinner-border como se indica a continuación.
     

Sintaxis: 

<div class="spinner-border" role="status"> 
    <span class="sr-only">Loading</span>
</div>
  • Ejemplo: 
     

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Spinners</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <center>
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <!-- spinner-border -->
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading</span>
        </div>
    </center>
</body>
</html>
  • Producción: 
     

  • Nota: Hemos utilizado la clase .spinner-border dentro del elemento <div>. Hemos utilizado el par atributo-valor role=”status” dentro de <div> para fines de accesibilidad y una etiqueta <span> con class=”sr-only”, que es una clase de Bootstrap que hace que el contenedor y su contenido sean visibles solamente en lectores de pantalla. 
     
  • Ruedas giratorias de colores: podemos cambiar el color de la rueda giratoria del borde usando las clases de utilidad de color de texto de Bootstrap junto con la clase .spinner-border como se indica a continuación.
     

Sintaxis: 

<div class="spinner-border text-primary" role="status">
    <span class="sr-only">Loading</span>
</div>
  • Ejemplo: 
     

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Spinners</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <center>
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <!-- spinner-border, #1 -->
        <div class="spinner-border text-primary"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-border, #2 -->
        <div class="spinner-border text-secondary"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-border, #3 -->
        <div class="spinner-border text-success"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-border, #4 -->
        <div class="spinner-border text-danger"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-border, #5 -->
        <div class="spinner-border text-warning"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-border, #6 -->
        <div class="spinner-border text-info"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-border, #7 -->
        <div class="spinner-border text-light"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-border, #8 -->
        <div class="spinner-border text-dark"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
    </center>
</body>
</html>
  • Producción: 
     

  • Nota: hemos utilizado la utilidad de color de texto en lugar de las utilidades de color de borde porque cada rueda de borde especifica un borde transparente para al menos un lado y las utilidades de {color} de borde anulan eso. 
     
  • Spinner en crecimiento: podemos crear un spinner en crecimiento utilizando la clase .spinner-grow de Bootstrap. Se muestra como crece repetidamente.

Sintaxis:  

        
<div class="spinner-grow" role="status"> 
     <span class="sr-only">Loading</span>
</div>
  • Ejemplo: 
     

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Spinners</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <center>
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <!-- spinner-grow -->
        <div class="spinner-grow" role="status">
            <span class="sr-only">Loading</span>
        </div>
    </center>
</body>
</html>
  • Producción: 
     

  • Nota: Hemos usado la clase .spinner-grow dentro de <div>. Hemos utilizado el par atributo-valor role=”status” dentro de <div> para fines de accesibilidad y una etiqueta <span> con class=”sr-only”, que es una clase de Bootstrap que hace que el contenedor y su contenido sean visibles únicamente en lectores de pantalla. 
     
  • Spinner de crecimiento de color: podemos cambiar el color del spinner de crecimiento mediante el uso de clases de utilidad de color de texto de Bootstrap junto con la clase .spinner-grow como se indica a continuación.
    Sintaxis: 
     
<div class="spinner-grow text-primary" role="status"> 
    <span class="sr-only">Loading</span>
</div>
  • Ejemplo: 
     

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Spinners</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <center>
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <!-- spinner-grow, #1 -->
        <div class="spinner-grow text-primary"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-grow, #2 -->
        <div class="spinner-grow text-secondary"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-grow, #3 -->
        <div class="spinner-grow text-success"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-grow, #4 -->
        <div class="spinner-grow text-danger"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-grow, #5 -->
        <div class="spinner-grow text-warning"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-grow, #6 -->
        <div class="spinner-grow text-info"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-grow, #7 -->
        <div class="spinner-grow text-light"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-grow, #8 -->
        <div class="spinner-grow text-dark"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
    </center>
</body>
</html>
  • Producción: 
     

  • Nota: La ruleta está construida con color actual, que cambia fácilmente su apariencia con las utilidades de color de texto. 
     
  • Botones con borde giratorio: podemos colocar el borde giratorio dentro del botón con texto o sin texto usando la clase .spinner-border dentro de una etiqueta <span>.
     

Sintaxis: 

<button type="button" class="btn btn-primary" disabled> 
    <span class="spinner-border spinner-border-sm" 
           role="status" aria-hidden="true"> 
    </span> 
    Text 
</button>
  • Ejemplo: 
     

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Spinners</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <center>
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <div class="container">
            <button type="button"
                class="btn btn-secondary" disabled>
                <span class="spinner-border spinner-border-sm"
                    role="status" aria-hidden="true">
                </span>
                <span class="sr-only">Loading</span>
            </button>
            <button type="button"
                class="btn btn-primary" disabled>
                <span class="spinner-border spinner-border-sm"
                    role="status" aria-hidden="true">
                </span>
                Processing...
            </button>
        </div>
    </center>
</body>
</html>
  • Producción: 
     

  • Nota: Hemos colocado el atributo «deshabilitado» dentro de la etiqueta <button> para desactivarlo y usamos los atributos «role» y «aria-hidden» dentro de la etiqueta <span> para fines de accesibilidad. 
     
  • Botones con spinner creciente: podemos colocar el spinner creciente dentro del botón con texto o sin texto usando la clase .spinner-grow dentro de una etiqueta <span>.
     

Sintaxis: 

<button type="button" class="btn btn-primary" disabled> 
    <span class="spinner-grow spinner-grow-sm" 
          role="status" aria-hidden="true">
    </span>  
    text
</button>
  • Ejemplo: 
     

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Spinners</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <center>
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <div class="container">
            <button type="button"
                class="btn btn-secondary" disabled>
                <span class="spinner-grow spinner-grow-sm"
                    role="status" aria-hidden="true">
                </span>
                <span class="sr-only">Loading</span>
            </button>
            <button type="button"
                class="btn btn-primary" disable>
                <span class="spinner-grow spinner-grow-sm"
                    role="status" aria-hidden="true">
                </span>
                Processing...
            </button>
        </div>
    </center>
</body>
</html>
  • Producción: 
     

  • Nota: Hemos colocado el atributo «deshabilitado» dentro de la etiqueta <button> para desactivarlo y usamos los atributos «role» y «aria-hidden» dentro de la etiqueta <span> para fines de accesibilidad.  

Cambiar el tamaño:  

  • Usando clase: Podemos cambiar el tamaño usando las clases .spinner-border-sm y .spinner-grow-sm junto con las clases .spinner-border y .spinner-grow . 
    La lista de clases de tamaño se proporciona a continuación: 
    • SM
    • Maryland
    • lg
  • Usando CSS: También podemos cambiar el tamaño de la ruleta usando el estilo CSS como se indica a continuación.
    Ejemplo: 
     

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Spinners</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <center>
        <div class="container">
            <h1 style="color:green;text-align:center;">
                GeeksforGeeks
            </h1>
            <div class="spinner-border text-primary"
                role="status" style="height:5rem; width:5rem;">
                <span class="sr-only">Loading</span>
            </div>
            <div class="spinner-grow text-primary"
                role="status" style="height:5rem; width:5rem;">
                <span class="sr-only">Loading</span>
            </div>
        </div>
    </center>
</body>
</html>
  • Producción: 
     

Cambiando la alineación: 

  • Uso de las utilidades de alineación de texto: podemos cambiar la alineación de la ruleta colocándola dentro de la etiqueta <div> que usa la clase de utilidad de alineación de texto para controlar la alineación de los elementos secundarios como se indica a continuación.
    Ejemplo: 
     

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Spinners</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <!-- Changing alignment using text utilities class -->
        <div class="text-center">
            <div class="spinner-border text-primary"
                role="status">
                <span class="sr-only">Loading</span>
            </div>
        </div>
    </div>
</body>
</html>
  • Producción: 
     

  • Uso de utilidades flotantes: podemos cambiar la alineación de la rueda giratoria colocándola dentro de la etiqueta <div> que usa la clase de utilidades flotantes para controlar la alineación de los elementos secundarios o usar la clase de utilidades flotantes directamente dentro de la etiqueta <div> a través de la cual se crea la rueda giratoria como se indica a continuación.
    Ejemplo: 
     

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Spinners</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <!-- Changing alignment using text utilities class -->
        <div class="clearfix float-right">
            <div class="spinner-border text-primary"
                role="status">
                <span class="sr-only">Loading</span>
            </div>
        </div>
    </div>
</body>
</html>
  • Producción: 
     

  • Uso de las utilidades de flexbox: podemos cambiar la alineación de la ruleta colocándola dentro del elemento <div> que usa la clase de utilidad de flexbox para controlar la alineación de los elementos secundarios como se indica a continuación.
    Ejemplo: 
     

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Spinners</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <!-- Changing alignment using text utilities class -->
        <div class="d-flex justify-content-center">
            <div class="spinner-border text-primary"
                role="status">
                <span class="sr-only">Loading</span>
            </div>
        </div>
    </div>
</body>
</html>
  • Producción: 
     

Navegadores compatibles:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari
     

Publicación traducida automáticamente

Artículo escrito por Vishal_Khoda 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 *