Cómo detectar que algo se está cargando en segundo plano (ya sea frontend o backend) y mostrar el ícono de carga

Esto es demasiado vago, dependería por completo de las bibliotecas que esté utilizando en el front-end y de lo que esté utilizando en el back-end.

Si, por ejemplo, está utilizando jQuery en el front-end y está apuntando a HTML5, la segunda versión de XMLHttpRequest ( XMLHttpRequest2 ) admite eventos de progreso … para cargar y descargar.

Para jQuery> 1.5.1:

$ .ajax ({
xhr: function () {
var xhr = nueva ventana.XMLHttpRequest ();
// Progreso de carga
xhr.upload.addEventListener (“progreso”, función (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
// Haz algo con el progreso de carga
console.log (percentComplete);
}
}, falso);
//Progreso de descarga
xhr.addEventListener (“progreso”, función (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
// Haz algo con el progreso de la descarga
console.log (percentComplete);
}
}, falso);
volver xhr;
},
tipo: ‘POST’,
url: “/”,
datos: {},
éxito: función (datos) {
// Haz algo con éxito
}
});

La mejor manera que he encontrado es que en el formulario, con el atributo onsubmit puedes hacer que tu ruleta sea visible.

entonces, justo antes de renderizar la página, puede ocultar su ruleta.

esto pondrá una flecha giratoria para el procesamiento respaldado (suponiendo que tenga paneles de actualización; de lo contrario, la pantalla se pondrá en blanco hasta que se actualice la página.

Se puede usar la misma técnica para procesar el front-end, pero solo debe hacer visible el control giratorio antes de ejecutar el código del lado del cliente y ocultarlo después

los 2 deben trabajarse por separado, pero pueden compartir el control giratorio

En mi opinión, el mejor spinner (control de carga) es un icono gráfico textual como glyphicon o fontawesom que usa animación CSS para rotarlo

Mis cohortes tienen algunas buenas ideas aquí. También agregaría animaciones CSS3 como una posibilidad. Ahora que CSS3 es omnipresente en cualquier navegador que no apesta, es un placer usarlo para varios tipos de animaciones y transiciones. Por ejemplo, puede hacerse con menos código que un método Javascript.

El único inconveniente es que debes tener alguna habilidad de CSS (¡sorpresa!), Y es posible que necesites experimentar para obtener lo que deseas.

Para obtener ideas, consulte algunos de estos:

Spinners CSS de elemento único

40 jQuery y CSS3 Cargando complementos de barra de progreso y animación

Animaciones creativas de carga de CSS

Animación de carga de CSS3

Gracias por preguntar.

More Interesting

¿Qué se espera que sepas como desarrollador web de Python de back-end?

Además de aprender frameworks de backend, bases de datos e implementación, ¿qué tipo de habilidades necesito para convertirme en desarrollador de backend?

¿Cuál es tu stack para el desarrollo de backend?

¿Cuál es el mejor marco de back-end para un desarrollador con un fondo PHP / JS / C #?

¿Qué idioma recomendaría la gente para el desarrollo web de back-end?

¿Necesito saber cómo administrar el bastidor físico del servidor para convertirme en un desarrollador de back-end?

Dado que la gente odia PHP para back-end, ¿qué es un mejor lenguaje de programación de back-end?

Cómo aprender la infraestructura común de implementación de back-end

¿Qué debería preferir para el backend del desarrollo web: Python o Node.js?

¿Puede una especialización que no sea CS convertirse en un desarrollador de back-end?

¿Necesito aprender un lenguaje de back-end para construir un clon de Wikipedia o sería suficiente un conocimiento de HTML y CSS?

¿Qué debo hacer para llamarme desarrollador back-end?

¿Alguna empresa de desarrollo de sitios web confiable y de buena reputación en China (con sede en Nanjing, Shanghai o cerca)?

Como novato total en el desarrollo web backend, ¿debería aprender PHP y MySQL o debería aprovechar mi conocimiento de Javascript y usar Javascript node.js en el backend para interactuar con la base de datos MySQL?

¿Por qué MeteorJS perdió su popularidad después de mediados de 2016?