Lefseq,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
progress {
border:0;
width: 300px;
height: 20px;
border-radius: 10px;
background: #f1f1f1;
}
progress::-webkit-progress-bar {
width: 300px;
height: 20px;
border-radius: 10px;
background: #f1f1f1;
}
progress::-webkit-progress-value {
border-radius: 10px;
background: #ffb76b;
}
progress::-moz-progress-bar {
border-radius: 5px;
background: #ffb76b;
}
.overlay {opacity: 0; visibility: hidden; position:fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 110; background: rgba(255, 255, 255, 0.50);}
.dlg-modal {width: 576px; height: 300px; opacity: 0; visibility: hidden; text-align: center; position: fixed; left: 50%; top: 180px; z-index: 130; margin-left: -288px; padding: 47px 36px; background: #ffffff; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5); box-shadow: 0 0 20px rgba(0,0,0,0.5); filter: alpha(opacity=0);}
.fadeIn, .fadeOut {-webkit-animation-duration: 0.4s; animation-duration: 0.4s; animation-timing-function: ease-out;}
.fadeIn {-webkit-animation-name: fadeIn; animation-name: fadeIn; opacity: 1; visibility: visible;}
.fadeOut {-webkit-animation-name: fadeOut; animation-name: fadeOut; opacity: 0; visibility: hidden;}
</style>
</head>
<body>
<div class="btn-box">
<button type="button" class="btn btn-default" data-modal="modal">Показать popup</button>
</div>
<div class="overlay" data-close=""></div>
<div id="modal" class="dlg-modal">
<progress id="progress" value="0" max="100"></progress>
</div>
<script>var typeAnimate = 'fade';
function getProgress(){
if(document.getElementById('progress').value>=document.getElementById('progress').max) return false;
document.getElementById('progress').value++;
setTimeout(getProgress,50);
}
getProgress();
;(function() {
var overlay = document.querySelector('.overlay'),
mOpen = document.querySelectorAll('[data-modal]'),
mStatus = false;
if (mOpen.length == 0) return;
[].forEach.call(mOpen, function(el) {
el.addEventListener('click', function(e) {
var modalId = el.getAttribute('data-modal'),
modal = document.getElementById(modalId);
modalShow(modal);
});
});
document.addEventListener('keydown', modalClose);
function modalShow(modal) {
overlay.classList.remove('fadeOut');
overlay.classList.add('fadeIn');
if (typeAnimate == 'fade') {
modal.classList.remove('fadeOut');
modal.classList.add('fadeIn');
} else if (typeAnimate == 'slide') {
modal.classList.remove('slideOutUp');
modal.classList.add('slideInDown');
}
mStatus = true;
getProgress();
}
function modalClose(event) {
if (mStatus && ( !event.keyCode || event.keyCode === 27 ) ) {
var modals = document.querySelectorAll('.dlg-modal');
[].forEach.call(modals, function(modal) {
if (typeAnimate == 'fade') {
modal.classList.remove('fadeIn');
modal.classList.add('fadeOut');
} else if (typeAnimate == 'slide') {
modal.classList.remove('slideInDown');
modal.classList.add('slideOutUp');
}
});
overlay.classList.remove('fadeIn');
overlay.classList.add('fadeOut');
mStatus = false;
document.getElementById('progress').value = 0;
}
}
})();
</script>
</body>
</html>