Bootstrap5 | Progreso

Posted on by Rudeus Greyrat

Bootstrap 5 es el último lanzamiento importante de Bootstrap en el que renovaron la interfaz de usuario y realizaron varios cambios. Una barra de progreso se utiliza para mostrar el progreso de un proceso en una computadora. Una barra de progreso muestra cuánto del proceso se completó y cuánto queda. Puede agregar una barra de progreso en una página web utilizando clases de arranque predefinidas. Bootstrap proporciona muchos tipos de barras de progreso. Los componentes de progreso están construidos con dos elementos HTML que usan CSS para establecer el ancho y algunos atributos. No utiliza el elemento HTML5 <progress> que permite apilar barras de progreso, animarlas y colocar etiquetas de texto sobre ellas. Utiliza .progress como contenedor para indicar el valor máximo de la barra de progreso y la barra de progreso interna para indicar el progreso hasta el momento.
Sintaxis:

<div class="progress"> Contents... <div>

Ejemplo: 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
      </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
      </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="progress">
            <div class="progress-bar"
                 style="width: 80%;">
              </div>
        </div>
    </div>
</body>
</html>

Producción:

Height of Progress Bar: We can use CSS property to change the height of progress bar. The default height of progress is 16px. The height of progress and progress-bar container must be the same. 

Ejemplo: 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
      </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
      </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="progress" style="height: 30px;">
            <div class="progress-bar"
                style="width: 80%; height: 30px;">
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Labeled Progress Bar: The labeled progress bar is used to display the text inside the progress bar to show the task completion percentage. 

Ejemplo: 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
        </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
        </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="progress">
            <div class="progress-bar" style="width: 75%;">
                75%
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Colored Progress Bars: Use Bootstrap 4 contextual background classes to set the color of progress bar. The default color of the progress bar is blue. 
Example: 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3"
        style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="progress">
            <div class="progress-bar"
                style="width: 50%;">
                50%
            </div>
        </div>
        <br/>
        <div class="progress">
            <div class="progress-bar bg-success"
                style="width: 60%;">
                60%
            </div>
        </div>
        <br/>
        <div class="progress">
            <div class="progress-bar bg-warning"
                style="width: 80%;">
                80%
            </div>
        </div>
        <br/>
        <div class="progress">
            <div class="progress-bar bg-danger"
                style="width: 90%;">
                90%
            </div>
        </div>
        <br/>
        <div class="progress">
            <div class="progress-bar bg-info"
                style="width: 100%;">
                100%
            </div>
        </div>
        <br/>
    </div>
</body>
</html>

Producción:

Striped Progress Bars: The .progress-bar-striped class is used to add stripes to the progress bars. Use the combination of .progress-bar and .progress-bar-striped classes to create striped progress bar. Use Bootstrap 4 contextual background classes to set the color of progress bar. 
Example: 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="progress">
            <div class="progress-bar progress-bar-striped"
                style="width: 60%;">
                60%
            </div>
        </div>
        <br/>
        <div class="progress">
            <div class="progress-bar bg-success progress-bar-striped"
                style="width: 70%;">
                70%
            </div>
        </div>
        <br/>
        <div class="progress">
            <div class="progress-bar bg-warning progress-bar-striped"
                style="width: 80%;">
                80%
            </div>
        </div>
        <br/>
        <div class="progress">
            <div class="progress-bar bg-danger progress-bar-striped"
                style="width: 90%;">
                90%
            </div>
        </div>
        <br/>
        <div class="progress">
            <div class="progress-bar bg-info progress-bar-striped"
                style="width: 100%;">
                100%
            </div>
        </div>
        <br/>
    </div>
</body>
</html>

Producción:

Animated Progress Bar: The .progress-bar-animated class is used to create an animated progress bar. Use the combination of .progress-bar, .progress-bar-striped and .progress-bar-animated to create an animated progress bar. 

Ejemplo: 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="progress">
            <div class="progress-bar
                progress-bar-striped
                progress-bar-animated"
                style="width: 60%;">
                60%
            </div>
        </div>
        <br/>
        <div class="progress">
            <div class="progress-bar bg-success
                progress-bar-striped
                progress-bar-animated"
                style="width: 70%;">
                70%
            </div>
        </div>
        <br/>
        <div class="progress">
            <div class="progress-bar bg-warning
                progress-bar-striped
                progress-bar-animated"
                style="width: 80%;">
                80%
            </div>
        </div>
        <br />
        <div class="progress">
            <div class="progress-bar bg-danger
                progress-bar-striped
                progress-bar-animated"
                style="width: 90%;">
                90%
            </div>
        </div>
        <br/>
        <div class="progress">
            <div class="progress-bar
                bg-info progress-bar-striped
                progress-bar-animated"
                style="width: 100%;">
                100%
            </div>
        </div>
        <br/>
    </div>
</body>
</html>

Producción:

 

Varias barras de progreso: se pueden apilar varias barras de progreso para mostrar barras de progreso de diferentes colores. 

Ejemplo: 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3"
        style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="progress">
            <div class="progress-bar"
                style="width: 50%;">
                50%
            </div>
            <div class="progress-bar bg-success"
                style="width: 25%;">
                25%
            </div>
            <div class="progress-bar bg-warning"
                style="width: 10%;">
                10%
            </div>
            <div class="progress-bar bg-danger"
                style="width: 5%;">
                5%
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Publicación traducida automáticamente

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