Как добиться, чтобы прогресс бар в модальном окне запускался после клика по ссылке данного окна?

Здравствуйте. Подскажите, как сделать, чтобы прогресс бар, установленный в модальном окне, запускался именно после открытия пользователем данного окна, нажатием на ссылку, а не после загрузки страницы?

Сейчас прогресс бар запускается сразу после загрузки страницы.

Модальное окно с прогресс баром:

    <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';</script>

Скрипт окна:

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

    }

 

    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;

        }

    }

})();

Стили окна:

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

Скрипт прогресс бара:

function getProgress(){

if(document.getElementById('progress').value>=document.getElementById('progress').max) return false;

document.getElementById('progress').value++;

setTimeout(getProgress,50);

}

getProgress();

Стили прогресс бара:

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;

}