47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
|
const topBar = document.createElement("div");
|
||
|
|
topBar.style.position = "fixed";
|
||
|
|
topBar.style.minHeight = "3px";
|
||
|
|
topBar.style.backgroundColor = "red";
|
||
|
|
topBar.style.zIndex = "1";
|
||
|
|
|
||
|
|
const transitionD = 500;
|
||
|
|
topBar.style.transition = `min-width ${transitionD}ms, opacity 250ms`;
|
||
|
|
topBar.style.minWidth = "0";
|
||
|
|
|
||
|
|
let widthDestino = 0;
|
||
|
|
|
||
|
|
document.body.appendChild(topBar);
|
||
|
|
|
||
|
|
let promesaActual;
|
||
|
|
|
||
|
|
const cambiarProgreso = progreso => {
|
||
|
|
widthDestino = progreso;
|
||
|
|
promesaActual = new Promise((resolve, reject) => {
|
||
|
|
topBar.style.minWidth = `${progreso}%`;
|
||
|
|
setTimeout(() => resolve(),transitionD);
|
||
|
|
});
|
||
|
|
return promesaActual;
|
||
|
|
};
|
||
|
|
|
||
|
|
const cancelarTransicion = () => {
|
||
|
|
const transiciones = topBar.style.transition;
|
||
|
|
topBar.style.transition = "";
|
||
|
|
topBar.style.minWidth = `${widthDestino}%`;
|
||
|
|
topBar.style.transition = transiciones;
|
||
|
|
};
|
||
|
|
|
||
|
|
const ocultarTopBar = () => {
|
||
|
|
topBar.style.opacity = "0";
|
||
|
|
setTimeout(() => {
|
||
|
|
topBar.style.minWidth = "0%";
|
||
|
|
},250);
|
||
|
|
};
|
||
|
|
|
||
|
|
const reiniciarTopBar = () => {
|
||
|
|
const transiciones = topBar.style.transition;
|
||
|
|
topBar.style.transition = "";
|
||
|
|
topBar.style.minWidth = `0`;
|
||
|
|
topBar.style.opacity = "1";
|
||
|
|
topBar.style.transition = transiciones;
|
||
|
|
};
|