Documentación e exemplos de uso de barras de progreso personalizadas de Bootstrap que admiten barras apiladas, fondos animados e etiquetas de texto.
Cómo funciona
Os compoñentes de Progress constrúense con dous elementos HTML, algúns CSS para definir o ancho e algúns atributos. Non usamos o elemento HTML5<progress> , o que garante que podes apilar barras de progreso, animalas e colocar etiquetas de texto sobre elas.
Usamos o .progresscomo envoltorio para indicar o valor máximo da barra de progreso.
Usamos o interior .progress-barpara indicar o progreso ata o momento.
.progress-barRequírese un estilo en liña, unha clase de utilidade ou un CSS personalizado para establecer o seu ancho .
O .progress-bartamén require algúns rolee ariaatributos para facelo accesible.
Reúne todo e tes os seguintes exemplos.
Bootstrap ofrece un puñado de utilidades para configurar o ancho . Dependendo das túas necesidades, poden axudarche a configurar rapidamente o progreso.
Etiquetas
Engade etiquetas ás barras de progreso colocando texto dentro do .progress-bar.
25 %
Altura
Só establecemos un heightvalor no .progress, polo que se cambias ese valor, o interior .progress-barcambiará automaticamente o tamaño correspondente.
Fondos
Use clases de utilidade en segundo plano para cambiar a aparencia das barras de progreso individuais.
Varias barras
Inclúe varias barras de progreso nun compoñente de progreso se o precisa.
Raias
Engade .progress-bar-stripeda calquera .progress-barpara aplicar unha franxa mediante degradado CSS sobre a cor de fondo da barra de progreso.
Raias animadas
O degradado con raias tamén se pode animar. Engadir .progress-bar-animateda .progress-barpara animar as franxas de dereita a esquerda mediante animacións CSS3.