0

estoy creando un CV en pagina web, entonces hay una seccion donde puse una barra de progreso de bootstrap para las diferentes tecnologias que empleo, entonces lo que quiero hacer es que estas barras se llenen de 0 al porcentaje que tengo establecido en el width cuando el usuario este visualizando esa seccion de la pagina

1
  • Por favor incluye la parte del codigo HTML donde se define el progressbar, de esta manera sera mas facil sugerir algun ajuste o adicion en la definicion.
    – F.Igor
    el 27 oct. 2021 a las 0:35

2 respuestas 2

0

Este es un ejemplo de animacion CSS usando el valor actual de width como estado final.

@keyframes expand {
  from {width:0%;}
  to {}
}

.progress-bar{
  animation-name:expand;
  animation-duration:1s;
  animation-iteration-count:1;
  animation-timing-function: ease-in;
}
<html>
<head>
    <title>Bootstrap Progress Bar</title>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Animated Progress Bar</h1>

        <div id="myProgressbar" class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
            <span class="sr-only">80% Complete</span>
          </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Puedes modificar los parametros de la animacion siguiendo las definiciones en https://developer.mozilla.org/es/docs/Web/CSS/animation

1
  • Gracias era lo que buscaba! Pense que la animacion era con javascript, de hecho encontre una libreria que se llama ProgressBar.js el 27 oct. 2021 a las 15:33
0

Que tal dejo un ejemplo rapido de las barras de progreso, como se puede observar estan estaticas, entonces quiero que cuando cargue la pagina empiece de 0 y se detenga en el valor asignado en el width

<!DOCTYPE html>
<html lang="es">
<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">
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Barra de progreso</title>
</head>
<body>

    <div class="container" style="margin-top: 50px ;">
        <div class="card">
            <div class="card-header">
               Skills 
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-around">
                    <span>HTML</span><span>90%</span>
                </div>
                <div class="progress" style="margin-top:10px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 90%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                    </div>
                </div>

                <div class="d-flex justify-content-around">
                    <span>CSS3</span><span>65%</span>
                </div>
                <div class="progress" style="margin-top:10px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 65%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                    </div>
                </div>

                <div class="d-flex justify-content-around">
                    <span>PHP</span><span>50%</span>
                </div>
                <div class="progress" style="margin-top:10px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 50%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                    </div>
                </div>

                <div class="d-flex justify-content-around">
                    <span>Javascript</span><span>60%</span>
                </div>
                <div class="progress" style="margin-top:10px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 60%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                    </div>
                </div>

                <div class="d-flex justify-content-around">
                    <span>MySQL</span><span>25%</span>
                </div>
                <div class="progress" style="margin-top:10px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 25%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.