Arranque | Juego de hilanderos-1

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.

Tipos de hilanderos :

  • Spinner de borde : podemos crear un spinner bordeado liviano usando la clase spinner-border 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;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <!-- spinner-border, #1 -->
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-border, #2 -->
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading</span>
        </div>
        <!-- spinner-border, #3 -->
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading</span>
        </div>
    </div>
</body>
</html>

Nota: hemos utilizado la clase spinner-border 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.

Producción:

spinner-border

  • Rueda de borde de color: podemos cambiar el color de la rueda de borde usando las clases de utilidad de color de texto de Bootstrap junto con la clase de borde de rueda 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, #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>
    </div>
</body>
</html>

Nota: hemos utilizado la clase spinner-border 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.

Producción:

spinner-border-colored

  • Spinner en crecimiento: podemos crear un spinner en crecimiento mediante el uso de una clase de Bootstrap de crecimiento de spinner 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-grow, #1 -->
        <div class="spinner-grow" role="status">
            <span class="sr-only">Loading</span>
        </div>
    </div>
</body>
</html>

Nota: hemos utilizado 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.

Producción:

spinner-grow

  • Spinner de crecimiento de color: podemos cambiar el color del spinner de crecimiento usando las clases de utilidad de color de texto de Bootstrap junto con la clase spinner-grow 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-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>
    </div>
</body>
</html>

Nota: hemos utilizado 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.

Producción:

spinner-grow-colored
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 *