Progress Bar
<gstock-progress-bar>
|
GstockProgressBar
Ejemplos
Mostrar valores
Utilice el slot default para mostrar un valor.
<gstock-progress-bar value="70">70%</gstock-progress-bar>Color
Utilice el atributo color para cambiar el color de la barra de progreso. Los valores disponibles son brand, success, warning y danger.
<div class="progress-bar-colors">
<label>Brand</label>
<gstock-progress-bar value="75" color="brand">75%</gstock-progress-bar>
<label>Success</label>
<gstock-progress-bar value="75" color="success">75%</gstock-progress-bar>
<label>Warning</label>
<gstock-progress-bar value="75" color="warning">75%</gstock-progress-bar>
<label>Danger</label>
<gstock-progress-bar value="75" color="danger">75%</gstock-progress-bar>
</div>
<style>
.progress-bar-colors {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.75rem 1rem;
}
.progress-bar-colors label {
font-family: var(--gstock-typography-font-family-body);
font-size: var(--gstock-typography-font-size-sm);
font-weight: var(--gstock-typography-font-weight-medium);
color: var(--gstock-color-text);
}
.progress-bar-colors gstock-progress-bar {
--height: 1.25rem;
}
</style>Indeterminado
Utilice el atributo indeterminate para animar la barra de progreso de forma indeterminada. En este estado, el valor se ignora y la etiqueta, si está presente, no se mostrará.
<gstock-progress-bar indeterminate></gstock-progress-bar>Etiquetas
Utilice el atributo label para etiquetar la barra de progreso e indicar a los dispositivos de asistencia cómo anunciarla.
<gstock-progress-bar value="50" label="Progreso de carga"></gstock-progress-bar>Altura personalizada
Utilice la propiedad personalizada --height para establecer la altura de la barra de progreso.
<gstock-progress-bar value="50" class="progress-bar-custom-height"></gstock-progress-bar>
<style>
.progress-bar-custom-height {
--height: 25px;
}
</style>