Barra de progreso de Foundation
La barra de progreso de Foundation se puede utilizar para mostrar el grado de procesamiento de un programa:
Podemos usar<div>en el elemento.progressla clase para crear la barra de progreso,.meterLa clase se usa para el elemento hijo (<span>). Podemos establecer el porcentaje de progreso en el elemento <span>, como se muestra a continuación:
Colores de la barra de progreso
De forma predeterminada, el color de la barra de progreso es azul. Las clases para diferentes colores son:.secondary, .success, o
.alert:
Ejemplo
<span class="meter" style="width:50%"></span>
</div>
<div class="progress secondary">
<span class="meter" style="width:50%"></span>
</div>
<div class="progress success">
<span class="meter" style="width:50%"></span>
</div>
<div class="progress alert">
<span class="meter" style="width:50%"></span>
</div>
Pruébalo »
Barra de progreso con esquinas redondeadas
.radiusy.roundLa clase se utiliza para añadir esquinas redondeadas a la barra de progreso:
Ejemplo
<span class="meter" style="width:50%"></span>
</div>
<div class="progress radius">
<span class="meter" style="width:50%"></span>
</div>
<div class="progress round">
<span class="meter" style="width:50%"></span>
</div>
Pruébalo »
Tamaños de la barra de progreso
Se puede utilizar.small-numo.large-numpara modificar el ancho de la barra de progreso,numes un número entre 1 (8.33%) y 12 (default (100%)):
Ejemplo
<span class="meter" style="width:50%"></span>
</div>
<div class="progress large-6">
<span class="meter" style="width:50%"></span>
</div>
<div class="progress large-9">
<span class="meter" style="width:50%"></span>
</div>
<div class="progress large-11">
<span class="meter" style="width:50%"></span>
</div>
<!-- Default width -->
<div class="progress large-12">
<span class="meter" style="width:50%"></span>
</div>
Pruébalo »
Etiqueta de la barra de progreso
Se puede usar CSS para añadir una etiqueta a la barra de progreso. En el siguiente ejemplo, agregamos un elemento <span> para mostrar el porcentaje:
Ejemplo
.percentage {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%, -50%);
font-size: 12px;
}
</style>
<div class="progress">
<span class="meter" style="position:relative;width:75%">
<span class="percentage">75%</span>
</span>
</div>
<div class="progress success">
<span class="meter" style="position:relative;width:50%">
<span class="percentage">50%</span>
</span>
</div>
<div class="progress alert">
<span class="meter" style="position:relative;width:25%">
<span class="percentage">25%</span>
</span>
</div>
Pruébalo »