First show messages

snackbar.css

#snackbar {
    min-width: 250px;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 9999999999999;
    left: 50%;
    bottom: 30px;
	  animation-fill-mode: forwards;
		animation-duration: 0.5s;
}

.snackbar-progressbar{
	position: absolute;
	top: 0;
	left: 0;
	height: 4px;
	width: 0%;
	background-color: red;
}

@keyframes fadein {
  from {bottom: 0; opacity: 0; visibility:hidden;}
  to {bottom: 30px; opacity: 1; visibility:visible;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1; visibility:visible;}
  to {bottom: 0; opacity: 0; visibility:hidden;}
}

@keyframes move { from { width:0%; } to { width:100%; }  }

snackbar.js

function snackbar(text,time = 6000) {
    if(window.timer_snackbar != undefined){ clearTimeout(window.timer_snackbar); }
    var x = document.getElementById("snackbar");
        var html = '<div class="snackbar-progressbar"></div><div class="snackbar-content">'+text+'</div>';

    if(x == null){
        var x = document.createElement("div");
        x.id = 'snackbar';
        x.innerHTML = html;
        document.body.append(x);
    }else{ x.innerHTML = html; }

        // 	Відобразити повідомлення
        x.style.animationName = 'fadein';
        // 	Запустимо прогресбар
        var animEL = x.querySelector('.snackbar-progressbar');
        animEL.style.animation = 'move '+time+'ms linear';
        // 	Закриємо повідомлення
    window.timer_snackbar = setTimeout(function(){
                x.style.animationName = 'fadeout';
    }, time);
}

snackbar('Привіт світ!');