Отображать значок Preloader - до полной загрузки страницы

Question

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

У меня есть 6 кнопок в верхней части страницы.Каждая кнопка загружает одну и ту же страницу, но с разными переменными, которые связаны с SQL-скриптом, который извлекает данные.Этот скрипт запускается и отображает информацию через несколько секунд.

<div>
  <a href="page.php?t=1" class="button">button 1</a>
  <a href="page.php?t=2" class="button">button 2</a>
  <a href="page.php?t=3" class="button">button 3</a>
  <a href="page.php?t=4" class="button">button 4</a>
  <a href="page.php?t=5" class="button">button 5</a>
  <a href="page.php?t=6" class="button">button 6</a>
</div>

<div class="load"></div> <!-- display preloader icon -->

У меня есть следующий jquery, который отображает значок предварительной загрузки, который исчезнет через 20 секунд, но я действительно хочу, чтобы он исчез, когда скриптзакончен, данные были отображены, и страница полностью загружена.

Это работает, но это клоги - я думаю, что лучшее решение - заставить его исчезнуть без 20-секундной задержки.

<script>
    $('.button').click(function(){
        $('.load').addClass('loading');
        setTimeout(function () { 
           $('.load').removeClass('loading');
        }, 20000);
    });
</script>

А вот относительный CSS ...

.loading {
    background: #EEE;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 200px;
    padding: 10px;
    font-weight: bold;
    font-family: 'Montserrat', Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: italic;
    background-image: url('images/preloader.svg');
    background-repeat: no-repeat;
    background-size: 28px 32px;
}

.loading:after {
    content: "Loading data...";
    color: #CC0000;
    text-align: right;
    padding-left: 15px;
}