lunes, julio 26, 2021

Creando una sencilla animación de una barra de progreso

Deberías leer

Antonio García Pratshttp://antoniogarciaprats.eu/
Estudios de Licenciatura en CC Quimicas e Ingeniería Técnica en Informática de Gestión por la Universidad de Jaén. Social Media autodidacta. Siempre en búsqueda de nuevos retos que proporcionen algún sentido a mi existencia.

Vamos a tratar de explicar un sencillísimo tutorial de cómo hacer una barra de progreso en html y css3. En esta ocasión usaremos algunas clases de Bootstrap, por lo que podéis acudir a su página web y descargaros las librerias o hacer uso de los enlaces CDN, tal y como lo hago yo en éste ejemplo.

El objetivo es crear una barra de progreso animada simple. Partimos de una estructura HTML5 básica a la que le hemos agregado los enlaces de Bootstrap para poder trabajar con este framework.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" text="text/css">

</head>
<body>
    

   <script src="js/intro.js"></script>
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 

</body>
</html>

Vamos a agregar el código HTML con las clases de Bootstrap que necesitemos. Usaremos una clase container a la que le agregaremos un padding en el eje Y. Acontinuación irá una clase dentro de la cual tomaremos un componente llamado progress-bar. Para más información sobre él, puedes irte a la siguiente página en la que encontrarás información y toda clase de ejemplos. Utilizaremos un botón para iniciar la animación

<div class="container text-center py-5">
        <h2 class="display-4" id="titulo">
            Animación de barra
        </h2>
        <div class="py-4">
            <div class="progress">
                <div id="barra" class="progress-bar progress-bar-striped inicio animacion" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div id="boton" class="btn btn-warning">Animar</div>
    </div>

El código javascript que necesitamos no puede ser más sencillo. Lo único que necesitamos en agregar al div con el id barra la clase final -a continuación vamos a ver el codigo css-. Al boton de agregaremos un evento onclick para poder iniciar la animación.

function animar ( ) {
     document.getElementById("barra").classList.toggle("final");
}

document.getElementById("boton").onclick = function () {
     animar ();
}

Crearemos las clases inicio y final que inicializarán la barra de progreso a 0% y a 100%. Utilizaremos la clase animación que contendrá una transición CSS.

.inicio {
   width: 0%;
}

.final {
   width: 100%;
}

.animacion {
   transition: all 2s ease  .5s;
}

A continuación os dejo el código del resultado final de este sencillo tutorial, recordando que lo podéis copiar y pegar desde esta página web, o bien, podéis dirigiros a mi cuenta de github y descargar todos los ficheros del tutorial para poder probarlo en vuestro propio ordenador.

No olvidéis dejad vuestros comentarios y aportaciones.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" text="text/css">

    <style>
        .inicio {
            width: 0%;
        }

        .final {
            width: 100%;
        }

        .animacion {
            transition: all 2s ease  .5s;
        }
    </style>

</head>
<body>
    
    <div class="container text-center py-5">
        <h2 class="display-4" id="titulo">
            Animación de barra
        </h2>
        <div class="py-4">
            <div class="progress">
                <div id="barra" class="progress-bar progress-bar-striped inicio animacion" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div id="boton" class="btn btn-warning">Animar</div>
    </div>


    <script>
        function animar ( ) {
            document.getElementById("barra").classList.toggle("final");
        }
        document.getElementById("boton").onclick = function () {
            animar ();
        }
    </script>

   <script src="js/intro.js"></script>
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 

</body>
</html>
- Advertisement -spot_img

Más publicaciones

Dejar respuesta

Please enter your comment!
Please enter your name here

- Advertisement -spot_img

Últimas publicaciones