Индикатор загрузки пока выполняется GET запрос axios

Делаю GET запрос на страницу для загрузки контента, запрос с помощью axios
файл app.js:

const axios = require("axios");

document.addEventListener("DOMContentLoaded", function() {
    axios.get("/get-cards")
        .then(response => {
            $("#content").html(response.data)
        })
        .catch(error => {
            console.log(`ERROR: ${error}`)
        });
});

страница где находится #content:

<div id="content">
    <!-- сюда загружается контент -->
</div>

страница на которую отправляется запрос (по адресу "/get-cards)":

@foreach($technics as $technic)
    <div class="technic-card">
        <div class="card-img-slider">
            <img src="{{ $technic->img_1 }}" alt="{{ $technic->name }}">
            <img src="{{ $technic->img_2 }}" alt="{{ $technic->name }}">
            <img src="{{ $technic->img_3 }}" alt="{{ $technic->name }}">
        </div>
        <div class="card-name">{{ $technic->name }}</div>
        <div class="card-type">{{ $technic->type }}</div>
        <div class="card-footer">
            <div class="card-price">{{ $technic->price }}/час</div>
            <div class="card-buy-btn">арендовать</div>
        </div>
    </div>
@endforeach

И когда только загружается страница где находится #content страница грузится 1-2 секунды, как сделать чтобы вместо загрузки окна был индикатор загрузки в #content(div блок с анимацией загрузки) до тех пор пока не выполнится запрос?