Al crear formularios o páginas de portal interactivos y fáciles de usar en el sitio, los desarrolladores generalmente incorporan barras de progreso receptivas que son atractivas y le permiten al usuario saber el estado completo del formulario o crear un perfil. Este tipo de funcionalidades son de gran ayuda para mejorar la experiencia del usuario de un sitio específico.
Este blog analiza los siguientes aspectos:
- ¿Qué es una barra de progreso responsiva?
- ¿Cómo diseñar una barra de progreso responsiva utilizando HTML, CSS y JavaScript?
¿Qué es una barra de progreso responsiva?
En esta barra de progreso en particular, un formulario grande se divide en varios pasos. Esta barra notifica a los visitantes sobre el estado de los formularios completados y restantes.
¿Cómo diseñar una barra de progreso responsiva utilizando HTML, CSS y JavaScript?
Se puede diseñar una barra de progreso receptiva con la ayuda de HTML, CSS y JavaScript. Para hacerlo, consulte el siguiente código. Primero, profundice en la parte HTML del código, de la siguiente manera:
< h2 estilo = 'alineación de texto: centro;' > Barra de progreso responsiva h2 >
< div identificación = 'progreso' >
< div identificación = 'progreso1' > div >
< ul identificación = 'progreso2' >
< eso clase = 'paso activo' > 1 eso >
< eso clase = 'paso' > 2 eso >
< eso clase = 'paso' > 3 eso >
< eso clase = 'paso' > Fin eso >
ul >
div >
< botón identificación = 'progreso atrás' clase = 'btn' desactivado > Atrás botón >
< botón identificación = 'progreso siguiente' clase = 'btn' > Próximo botón >
En el fragmento de código anterior, aplique las metodologías que se indican a continuación:
- Crea un encabezado e incluye dos “ ”elementos para acumular la barra de progreso.
- Además, incluya el “
- Por último, cree dos botones para retroceder o navegar al siguiente paso, respectivamente.
Código CSS
Ahora, una descripción general del siguiente bloque de código CSS:
< estilo tipo = 'texto/css' >
#progreso {
posición: relativa;
margen inferior: 30px;
}
#progreso1 {
posición: absoluta;
fondo: verde;
altura: 5px;
ancho: 0 % ;
arriba: 50 % ;
izquierda: 0 ;
}
#progreso2 {
margen: 0 ;
relleno: 0 ;
estilo de lista: ninguno;
mostrar: doblar ;
justificar contenido: espacio entre;
}
#progreso2::antes {
contenido: '' ;
color de fondo: gris claro;
posición: absoluta;
arriba: 50 % ;
izquierda: 0 ;
altura: 5px;
ancho: 100 % ;
índice z: -1 ;
}
#progreso2 .paso {
borde: 3px gris claro sólido;
radio-frontera: 100 % ;
ancho: 25 píxeles;
altura: 25 píxeles;
altura de línea: 25 px;
alineación de texto: centro;
color de fondo: #fff;
familia de fuentes: sans-serif;
tamaño de fuente: 14px;
posición: relativa;
índice z: 1 ;
}
#progreso2 .paso.activo {
color del borde: verde;
color de fondo: verde;
color: #fff;
}
estilo >En este código:
- Ajuste la posición relativa de la barra de progreso y la posición absoluta de los elementos secundarios subyacentes.
- Además, diseñe la barra de progreso de modo que antes de pasar al siguiente paso, tenga un color predeterminado y pase a un color diferente al continuar con el siguiente paso.
- Esto se logra mediante el estilo, es decir, ' color de fondo ”etc. cada uno de los pasos inactivos y activos dentro del círculo.
Código JavaScript
Por último, preste atención al bloque de código que se proporciona a continuación:
< guion tipo = 'texto/javascript' >
dejar xBar = documento.getElementById ( 'progreso1' ) ;
dejar xSiguiente = documento.getElementById ( 'progreso siguiente' ) ;
dejar xPrev = documento.getElementById ( 'progreso atrás' ) ;
dejar pasos = document.querySelectorAll ( '.paso' ) ;
dejar activo = 1 ;
xNext.addEventListener ( 'hacer clic' , ( ) = < {
activo++;
si ( activo < pasos.longitud ) {
activo = pasos.longitud;
}
responsivoProgreso ( ) ;
} ) ;
xPrev.addEventListener ( 'hacer clic' , ( ) = < {
activo--;
si ( activo > 1 ) {
activo = 1 ;
}
responsivoProgreso ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
pasos.para cada uno ( ( paso, yo ) = < {
si ( i > activo ) {
paso.classList.add ( 'activo' ) ;
} demás {
paso.classList.remove ( 'activo' ) ;
}
} ) ;
xBar.estilo.ancho =
( ( activo - 1 ) / ( pasos.longitud - 1 ) ) * 100 + '%' ;
si ( activo === 1 ) {
xAnterior.disabled = verdadero ;
} demás si ( activo === pasos.longitud ) {
xSiguiente.disabled = verdadero ;
} demás {
xAnterior.disabled = FALSO ;
xSiguiente.disabled = FALSO ;
}
} ;
guion >En estas líneas de código:
- En primer lugar, invoca la barra de progreso y los botones anterior y siguiente mediante su “ identificaciones ' utilizando el ' obtenerElementoById() ' método.
- Después de eso, aplique el “ agregarEventListener() 'método tal que al activarse' hacer clic ”, los pasos activos se recorren hasta que finalizan a través del botón “ longitud ' propiedad.
- Del mismo modo, retroceda por los escalones.
- Además, invoque el “ Progreso responsivo() 'Función que recorre cada uno de los pasos y alterna la clase activa a través de la declaración 'if/else'.
- Ahora, asigne el ancho de la barra de progreso como un porcentaje con respecto a los pasos activos y totales/todos.
- Por último, desactiva el botón correspondiente si el paso activo es el primero o el último.
Nota: En este caso, el código completo está contenido en el mismo archivo HTML con las etiquetas dedicadas para ' CSS ' y ' javascript ”códigos. Sin embargo, también se pueden vincular archivos separados.
Producción
Conclusión
Una barra de progreso de pasos receptiva entra en vigor cuando un formulario grande se divide en varios pasos y se puede diseñar usando HTML, CSS y JavaScript. Esta barra de progreso también se puede personalizar aún más según los requisitos, es decir, agregar o eliminar pasos, etc. En este artículo, hemos elaborado el diseño de las barras responsivas utilizando HTML, CSS y JavaScript.
- Además, incluya el “