Arranque | Juego de hilanderos-2

Posted on by Rudeus Greyrat

Bootstrap nos proporciona varias clases para crear diferentes estilos de la ruleta para indicar el estado de carga. También podemos modificar la apariencia, el tamaño y la ubicación de los giradores con las clases proporcionadas por Bootstrap.

Botones con borde giratorio: podemos colocar el borde giratorio dentro del botón usando la clase spinner-border dentro de una etiqueta <span> que a su vez está anidada dentro de una etiqueta <button> que tiene clases de botón Bootstrap como se indica a continuación.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Bootstrap | Spinner</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        div {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <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>
</body>
</html>

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.

Producción:

button-spinner-border

Botones con spinner creciente: podemos colocar el spinner creciente dentro del botón usando la clase spinner-grow dentro de una etiqueta <span> que a su vez está anidada dentro de una etiqueta <button> que tiene clases de Bootstrap Button como se indica a continuación. 

Cambiar el tamaño:

  • Uso de la clase: podemos hacer que la ruleta sea más pequeña usando las clases spinner-border-sm y spinner-grow-sm junto con las clases spinner-border y spinner-grow , respectivamente, como se indica a continuación.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Bootstrap | Spinner</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        div {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <!-- spinner-border-sm -->
        <div class="spinner-border text-primary spinner-border-sm"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-grow-sm -->
        <div class="spinner-grow text-primary spinner-grow-sm"
            role="status">
            <span class="sr-only">Loading</span>
        </div>
    </div>
</body>
</html>

Producción:

change-size-class

  • Usando CSS: También podemos cambiar el tamaño de la rueda usando el estilo CSS como se indica a continuación.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Bootstrap | Spinner</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        div {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>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>
</body>
</html>

Producción:

cambiar-tamaño-css
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.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Bootstrap | Spinner</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        div {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>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:

change-alignment-text

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

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Bootstrap | Spinner</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        div {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>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:

change-alignment-float

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

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Bootstrap | Spinner</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        div {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>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:

change-alignment-flex

Navegador compatible:

  • Google Chrome
  • Borde de Microsoft
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

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