Rastreador de Progreso

Ofrecen breves mensajes sobre los procesos de las aplicaciones en la parte inferior de la pantalla.

La funcionalidad del rastreador de progreso es mostrar visualmente el avance de una tarea o proceso, se actualiza en tiempo real, proporciona feedback y permite interacciones. Mejora la experiencia del usuario al brindar información clara y contextual sobre el progreso realizado y ayuda a mantener a los usuarios informados y comprometidos durante el proceso.

Estos son algunos aspectos importantes sobre la funcionalidad del rastreador de progreso:

Visual: Un rastreador de progreso utiliza una representación visual para mostrar el progreso de una tarea o proceso. Para Malta se utilizan barras claramente separadas que indican la instancia pasada, actual y próxima.

Actualización: El rastreador de progreso se actualiza dinámicamente a medida que la tarea o el proceso avanza. Esto permite a los usuarios ver el progreso en tiempo real y comprender cuánto se ha completado, en cual instancia va y cuánto queda por hacer.

Contexto: Además del indicador visual, se puede incluir indicadores visuales adicionales para proporcionar más información. Esto puede incluir elementos como hitos en chips interactivos y un descriptor que muestre de manera clara y comprensible el avance realizado.

Experiencia: Un rastreador de progreso mejora la experiencia del usuario al brindarles una visión clara y transparente del avance de una tarea. Se utiliza para ayudar a reducir la incertidumbre y la ansiedad, aportando una sensación de control y logro.

Línea de Progreso Vertical

Paso 1

Tu solicitud fue recibida

Paso 1

Tu solicitud fue recibida

Paso 3

Te eliminaremos del registro estudiantil

Paso 4

Te notificaremos la situación final de tu solicitud

HTML

CSS

.rastreador-progreso-vertical {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 4px;
width: 260px;
background-color: white;
}

.rastreador-progreso-vertical .contenedor {
display: flex;
gap: 20px;
}

.rastreador-progreso-vertical .elemento {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 10px;
height: 106px;
}

.rastreador-progreso-vertical .elemento p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #024588;
}

.rastreador-progreso-vertical .elemento .disabled {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #B6AFAF;
}

.rastreador-progreso-vertical .barra-vertical-primero {
border-radius: 10px 10px 0px 0px;
width: 6px;
height: 106px;
}

.rastreador-progreso-vertical .barra-vertical-ultimo {
border-radius: 0px 0px 10px 10px;
width: 6px;
height: 106px;
}

.rastreador-progreso-vertical .barra-vertical {
width: 6px;
height: 106px;
}

.rastreador-progreso-vertical .completado {
background-color: #27BB22;
}

.rastreador-progreso-vertical .en-progreso {
background-color: #3D8DDD;
}

.rastreador-progreso-vertical .pendiente {
background-color: #D7E5F4;
}

JS

Línea de Progreso horizontal

Paso 1

Tu solicitud fue recibida

Paso 2

Te contactaremos para apoyo

Paso 3

Te eliminaremos del registro estudiantil

Paso 4

Te notificaremos la situación final de tu solicitud

HTML

CSS

.rastreador-progreso-horizontal {
display: flex;
align-items: flex-start;
padding: 0px;
gap: 4px;
background-color: white;
}

.rastreador-progreso-horizontal .contenedor {
display: flex;
flex-direction: column;
gap: 20px;
}

.rastreador-progreso-horizontal .elemento {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 10px;
height: 140px;
width: 180px;
}

.rastreador-progreso-horizontal .elemento p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
width: 95%;
color: #024588;
}

.rastreador-progreso-horizontal .elemento .disabled {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #B6AFAF;
}

.rastreador-progreso-horizontal .barra-horizontal-primero {
border-radius: 10px 0px 0px 10px;
width: 180px;
height: 6px;
}

.rastreador-progreso-horizontal .barra-horizontal-ultimo {
border-radius: 0px 10px 10px 0px;
width: 180px;
height: 6px;
}

.rastreador-progreso-horizontal .barra-horizontal {
width: 180px;
height: 6px;
}

.rastreador-progreso-horizontal .completado {
background-color: #27BB22;
}

.rastreador-progreso-horizontal .en-progreso {
border-top: 6px solid #3D8DDD;
}

.rastreador-progreso-horizontal .pendiente {
border-top: 6px solid #D7E5F4;
}

JS

Línea de Progreso horizontal

HTML

CSS

.rastreador-progreso-horizontal {
display: flex;
align-items: flex-start;
padding: 0px;
gap: 4px;
background-color: white;
}

.rastreador-progreso-horizontal .barra-horizontal-primero {
border-radius: 10px 0px 0px 10px;
width: 180px;
height: 6px;
}

.rastreador-progreso-horizontal .barra-horizontal-ultimo {
border-radius: 0px 10px 10px 0px;
width: 180px;
height: 6px;
}

.rastreador-progreso-horizontal .barra-horizontal {
width: 180px;
height: 6px;
}

.rastreador-progreso-horizontal .completado {
background-color: #27BB22;
}

.rastreador-progreso-horizontal .en-progreso {
border-top: 6px solid #3D8DDD;
}

.rastreador-progreso-horizontal .pendiente {
border-top: 6px solid #D7E5F4;
}