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;
};