Card Progress Bar

Es un card que puede llevar un label text, una barra de progreso y un porcentaje. Se utiliza para mostrar más de un progress bar en una vista. Puede albergar la cantidad que sea necesaria apilada verticalmente. Se utilizan para evidenciar resultados de reportería, encuestas y resultados finales. Los Card progress bar no pueden apilarse horizontalmente.

Playground

Sed vel orci rutrum nibh eleifend

90

Sobresaliente

Dato en progress bar

Color progress bar

successdangerinfowarning

Indicador

Dato numérico

Símbolo porcentaje

Contenido de ejemplo

Ruby

app/widgets/widget/card_progress_bar.erb

<%= card_progress_bar_widget do |bar| %>
  <% bar.item 'Sed vel orci rutrum nibh eleifend',
                        90,
                        progress_label: 'Sobresaliente',
                        progress_color_class: :success 
  %> 
<% end %>

Html

<div class="card">
  <div class="card-progress row">
    <div class="card-progress__title pl-0 col-md-6">
      <div class="text-truncate " data-overflow-tooltip="Lorem ipsum dolor sit">
        Lorem ipsum dolor sit
      </div>
    </div>
    <div class="col-md-6 px-0">
      <div class="card-progress__container">
        <div class="card-progress__bar">
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 90.0%; "> </div>
          </div>
        </div>
        <div class=card-progress__info-width>
          <span class="text-left">
            90.0
          </span>
          
        </div>
        <div class="card-progress__label" data-overflow-tooltip="Sobresaliente">
          <div class="chip badge badge-success text-truncate" data="">
            Sobresaliente
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
              

lista de parámetros

Parámetro

Tipo

Detalle

title	String	Para agregar título al widget
progress_label	String	Textos que va dentro del label
progress_porcentage	Integer	El porcentaje que tendrá el progress bar
progress_color	String	El color que tendrá el progress bar
progress_indicator_up	Boolean	Muestra el icono 'arrow-alt-circle-up' con color succsess
progress_indicator_down	Boolean	Muestra el icono 'arrow-alt-circle-down' con color danger
progress_data	Integer	Para agregar un dato numerico
progress_tooltip	String	Texto que va en el toltip

Anatomía simple

1. Contenedor

Contiene todos los atomos.

2. Label text

Label text adaptable a contenido específico.

3. Barra de progreso

Puede contener desde 1 a 10 barras de progreso según sea necesario.

4. Indicador de progreso

Lleva el porcentaje de progreso que indica la barra en número.

5. Tags [opcional]

Los tags pueden tratarse de chips, iconos u texto complementario.

Anatomía multiple

1. Progress data bar [opcional]

--

2. Label text

Label text adaptable a contenido específico.

3. Barra de progreso

--

4. Porcentaje de progreso

--

5. Progress Indicator [opcional]

Represantado por un icono arrow down / up.

6. Chip [opcional]

--

7. Progress data [opcional]

--

6. Contenedor

Es el contenedor principal, la superficie del componente.

Casos de uso

El card progress-bar se usa para demostrar información sobre un proceso de manera gráfica. Su principal característica es la barra de progreso. Actualmente su mayor uso recae en los reportes de evaluaciones de desempeño y clima.

Caso 1: Mostrar el resultado de un indicador específico

Usando la anatomía básica del card progress bar (label, barra de progreso y el número a la derecha) se puede mostrar el resultado de un indicador en específico.

1. Se puede complementar con el dato numérico dentro de la barra de progreso.
2. Se puede añadir el símbolo de porcentaje a los datos en el caso de ser necesario.
3. Se puede añadir un chip indicando a qué tipo de resultado pertenece el indicador.

Ejemplos

Algunos ejemplos son el resultado de la evaluación de desempeño por área y la cantidad de usuarios que pertenecen al grupo detractores de una encuesta NPS.

Link a la vista

Caso 2: Mostrar la evolución de uno o más indicadores

El card progress-bar permite añadir ciertos parámetros que dan información relacionada a la evolución de un indicador.

1. Se puede añadir un segundo indicador numérico que muestre la evolución del resultado.
2. Se puede añadir un ícono arrow down / up que indique la evolución del resultado.

Ejemplos

Un ejemplo es la evolución de un resultado de una evaluación de desmpeño de un año respecto a otro.

Link a la vista