как заставить страницу ждать, пока удаление завершится, затем обновить

Question

Я довольно новичок в использовании javascript и ajax.Так что у меня есть кнопка, которая должна удалить элемент при нажатии.

<button type="submit" class="delete-button" data-id="{{ d_id }}">Delete</button>

Я использовал ajax для отправки запроса на удаление POST.Пока это происходит (удаление элемента занимает некоторое время), как можно создать круг загрузки в HTML.Я хотел бы показать полосу обработки или что-то подобное во время обработки запроса, и когда это будет сделано, обновите, чтобы показать изменения.В настоящее время после успешного удаления пользователь не увидит изменения, пока не обновит страницу вручную.

$(document).ready(function() {
    $(".delete-button").click(function () {
        var d_id = $(this).attr('d_id');
        $.ajax({
            type: "POST",
            url: "/delete/" + d_id
        }).done(function (data) {
            if (data === 'Deleted') {
                console.log("Deleted") 
            } else {
                console.log("Failed")
            }
        })
    });
});