Personalizar la carga para la aplicación
A continuación se muestra un ejemplo de cómo personalizar la carga para el componente o-app. En este ejemplo, hemos creado una barra de progreso animada que se incrementa gradualmente durante la carga de la página y se completa al llegar al 100%. Luego, se elimina el elemento de carga.
Puede copiar y utilizar el siguiente código para personalizar el efecto de carga de su aplicación:
export const loading = () => {
const loadingEl = $({
tag: "div",
css: {
width: "100%",
height: "100%",
position: "absolute",
zIndex: 1000,
left: 0,
top: 0,
},
html: `
<div style="transition: all 10s cubic-bezier(0, 0, 0.22, 0.84) 0s; height: 2px;width: 0;background-color: rgb(0, 161, 46);"></div>
`,
});
setTimeout(() => (loadingEl[0].style.width = "98%"), 50);
loadingEl.remove = () => {
loadingEl[0].style["transition-duration"] = "0.1s";
loadingEl[0].style.width = "100%";
setTimeout(() => {
$.fn.remove.call(loadingEl);
}, 200);
};
return loadingEl;
};
A través de este código, puedes agregar un efecto de carga único a tu aplicación, para que los usuarios tengan una mejor experiencia durante el proceso de cambio de página.