Progress Bar

Deben utilizarse cuando el proceso dura más de 10 segundos y el sistema pueda estimar la finalización de una tarea. Pueden combinarse con un controlador para cancelar el proceso. Pueden utilizarse con títulos (Nombre de archivo), iconografía a la izquierda y chips. Esencialmente, responde a estas tres preguntas: Estado actual: ¿Qué está pasando? Resultados: ¿Qué acaba de suceder? Estado futuro: ¿Qué pasará después?

Playground

50.0%

Sección 1

50/100

Mostrar Chip

Mostrar Monto

Porcentaje en barra

Monto Total

---

Monto Completado

50

Color Barra y Chip

successdangerinfowarning

Tooltip en la Barra

---

Nueva Sección

Ruby

app/widgets/widget/progress_bar.erb

<%= progress_bar_widget 100, show_labels: true, show_amount: true, show_percentage: true do |bar|
        bar.progress 'Sección 1', 50, success, 50.0%, 
        
end %>

Html

<div>
  <div class="progress mb-0">
    <div class="progress-bar progress-bar-success"  style="width: 50.0%;"> 50.0% </div>
    
  </div>
  <span class="progress-bar-labels align-items-center mr-3 my-2">
    <div class="chip badge badge-success mr-2" data-toggle="tooltip" title="" data-original-title="14%">Sección 1</div>
    50/100
  </span>
  <span class="progress-bar-labels align-items-center mr-3 my-2">
      <div class="chip badge badge-danger mr-2" data-toggle="tooltip" title="" data-original-title="14%">Sección 2</div>
      50/100
    </span>
</div>

lista de parámetros

Parámetro

Tipo

Detalle

total	Integer	Cantidad total de elementos que se contaran en la barra de progreso
name	String	Nombre de la sección
amount	Integer	Cantidad de elementos correspondientes a esta sección
class_name	String	Nombre de la clase para el color de la barra y label. Hoy en día solo soporta: primary, warning y success
tooltip	String	Texto a mostrar en el tooltip de la sección
show_labels	Boolean	Por defecto es false, indica si mostrar los labels o no
show_amount	Boolean	Indica si se muestran los textos al lado de los labels
show_percentage	Boolean	Indica si se muestra el porcentaje en la barra

Anatomía Progress Bar

1. Línea de progreso

La representación visual del progreso.

2. Contenedor de la parra de progreso

determina la longitud de la barra según el espacio disponible en la pantalla..

3. Helper text

Use texto de ayuda con una barra de progreso si el proceso es complejo o tiene un largo tiempo de espera. Esto permite a los usuarios saber qué subprocesos se están llevando a cabo.

4. Label text

Puede llevar un label text.

5. Indicador

Indicador de progreso.

Adicionalmente el progress bar puede llevar un footer de componentes adicionales, estos componentes son: Chips, iconos, helper text, entre otros. Estos se utilizan para complementar la acción que se está realizando.