在 axios GET 请求进行时加载指示器

我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带有加载动画的块）而不是加载窗口有一个加载指示器？