Barra de progreso
El componente de barra de progreso se construye con dos elementos HTML, algunas propiedades CSS permiten establecer el ancho y algunos atributos. Nosotros no vamos a utilizar el element <progress> de HTML sino la clase que ha diseñado Boostrap para ello.
- Usaremos la clase .progress como un wrapper para indicar el máximo valor del progress bar
- Usaremos .progress-bar para indicar el progreso
- El .progress-bar requiere un estilo inline o un diseño CSS customizado para establecer el ancho. style="width: XX%" sin esto no aparecerá o tendrá un ancho de 0 el progress-bar
- El .progress-bar también requiere los atributos role y aria. Con role indicamos qué es (progressbar), y con aria podemos decir cuál es el valor actual (aria-valuenow="25"), desde dónde empieza (arai-valuemin="0") y aria-valuemax="100" para indicar dónde termina.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>