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
2 respuestas
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
-
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
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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>