Indicador de Progreso

Indican a los usuarios el estado del progreso de una acción que requiere una carga o demora.

La funcionalidad del indicador de progreso evidencia el avance o la finalización de una tarea o proceso.

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

Visual: El indicador de progreso muestra visualmente cómo avanza una tarea o proceso a medida que se completa. Puede tomar la forma de una barra de progreso o un círculo que se llena gradualmente. Además este círculo puede estar dentro de un botón primario o secundario vinculado directamente a una acción.

Feedback: El indicador de progreso brinda feedback en tiempo real al usuario, lo que le permite comprender y visualizar el progreso de una acción. Esto ayuda a los usuarios a tener una idea clara de cuánto tiempo o cuántas etapas quedan para completar la tarea.

Control: Al mostrar el progreso de una tarea, el indicador de progreso ayuda a los usuarios a tener una sensación de control y comprensión de lo que está sucediendo. También puede reducir la ansiedad o la incertidumbre al mostrarles que el proceso está en marcha y en qué punto se encuentran.

Rendimiento: El indicador de progreso también puede indicar el rendimiento o la eficiencia del proceso. Por ejemplo, si una tarea se completa rápidamente, el indicador de progreso puede moverse más rápidamente, lo que brinda una sensación de fluidez y eficacia.

Complemento: Además de mostrar el progreso, el indicador de progreso puede proporcionar información adicional, como el porcentaje completado, el tiempo estimado restante o una descripción breve del estado actual.

Interacción: Algunos indicadores de progreso permiten a los usuarios interactuar con ellos. Por ejemplo, pueden permitir pausar, reiniciar o cancelar una tarea en progreso. Esto brinda a los usuarios un mayor control sobre el proceso.

Indicador Lineal de Progreso Incompleto

HTML

CSS

progress {
background: #D7E5F4;
border: none;
border-radius: 10px;
height: 6px;
overflow: hidden;
width: 100%;
}

progress::-webkit-progress-bar {
background: #D7E5F4;
}

progress::-webkit-progress-value {
background-color: #3D8DDD;
}

progress::-moz-progress-bar {
background-color: #3D8DDD;
}

progress.completado::-webkit-progress-value {
background-color: #27BB22;
}

progress.completado::-moz-progress-bar {
background-color: #27BB22;
}

JS

Indicador Lineal de Progreso Completado

HTML

CSS

progress {
background: #D7E5F4;
border: none;
border-radius: 10px;
height: 6px;
overflow: hidden;
width: 100%;
}

progress.completado::-webkit-progress-value {
background-color: #27BB22;
}

progress.completado::-moz-progress-bar {
background-color: #27BB22;
}

JS

Indicador Lineal de Progreso Indeterminado

HTML

CSS

progress {
background: #D7E5F4;
border: none;
border-radius: 10px;
height: 6px;
overflow: hidden;
width: 100%;
}

progress.cargando-barra-horizontal::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: #3D8DDD;
animation: progress-bar 3s linear infinite;
}

@keyframes progress-bar {
0% {
transform: translateX(-100%);
}

100% {
transform: translateX(100%);
}
}

JS

Indicador circular de Progreso

HTML

CSS

.loader {
border: 6px solid #D7E5F4;
border-radius: 50%;
width: 32px;
height: 32px;
}

.loader-btn {
border: 4px solid #ffffff;
border-top: 4px solid #3D8DDD;
border-right: 4px solid #3D8DDD;
border-bottom: 4px solid #3D8DDD;
border-radius: 50%;
width: 32px;
height: 32px;
animation: spin 1s linear infinite;
}

.loader-25 {
border-top: 6px solid #3D8DDD;
animation: spin 1s linear infinite;
}

.loader-50 {
border-top: 6px solid #3D8DDD;
border-right: 6px solid #3D8DDD;
animation: spin 1s linear infinite;
}

.loader-75 {
border-top: 6px solid #3D8DDD;
border-right: 6px solid #3D8DDD;
border-bottom: 6px solid #3D8DDD;
animation: spin 1s linear infinite;
}

.loader-100 {
border-top: 6px solid #27BB22;
border-right: 6px solid #27BB22;
border-bottom: 6px solid #27BB22;
border-left: 6px solid #27BB22;
}

.loader-btn-100 {
border-top: 4px solid #27BB22;
border-right: 4px solid #27BB22;
border-bottom: 4px solid #27BB22;
border-left: 4px solid #27BB22;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

JS

Indicador circular de Progreso en botón Secundario

HTML

CSS

.loader-btn-indeterminado {
border: 4px solid #ffffff;
border-radius: 50%;
width: 32px;
height: 32px;
animation: spinFull 2.5s linear infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

@keyframes spinFull {
0% {
transform: rotate(0deg);
}

25% {
transform: rotate(180deg);
border-top: 4px solid #3D8DDD;
}

50% {
transform: rotate(360deg);
border-top: 4px solid #3D8DDD;
border-right: 4px solid #3D8DDD;
}

75% {
transform: rotate(540deg);
border-top: 4px solid #3D8DDD;
border-right: 4px solid #3D8DDD;
border-bottom: 4px solid #3D8DDD;
}
100% {
transform: rotate(720deg);
border-top: 4px solid #3D8DDD;
border-right: 4px solid #3D8DDD;
border-bottom: 4px solid #3D8DDD;
border-left: 4px solid #3D8DDD;
}
}

JS

Indicador circular de Progreso en botón Primario

HTML