Как сделать картинку загрузки?

Question

[Web__Nikita03]

Есть код, который работает и отправляет файлы, но я хочу что бы от момента, когда нажата клавиша отправить, до всплытия окна была картинка,допустим, шестеренки или пульсирующего кружка.Как это сделать?

$('form').submit(function(event) {
    event.preventDefault();
    $.ajax({
      type: $(this).attr('method'),
      url: $(this).attr('action'),
      data: new FormData(this),
      contentType: false,
      cache: false,
      processData: false,
      success: function(result) {
        $('#exampleModal1').arcticmodal();
      },
    });
  });

<?php 
if (!empty($_POST['name']) AND !empty($_POST['tel'])){
  
  $headers = 'Заявка от  клиента '.$_POST['name'].
             
  $theme = 'GeoFox';

  $letter = 'Данные сообщения:\r\n';
  $letter .='Имя: '.$_POST['name'].'\r\n';
  $letter .='Телефон: '.$_POST['tel'].'\r\n';
  
  if (mail('[e-mail]', $theme, $letter, $headers)){

  } else {
    echo "Ошибка при отправке!";
  }
} else {
  echo "Ошибка: Заполните все поля!";
}

<form action="submit.php" method="POST" id="form">
                        <input type="text" name="name" class="input" placeholder="Имя">
                        <input type="tel" name="tel" class="input" placeholder="Телефон">
                        <input type="submit" value="Позвонить мне" name="btn" class="btn  btn-form">
                    </form>

Answer 1

[Никита Ермиличев]

$('form').submit(function(event) {
    event.preventDefault();
    //Здесь создаём/показываем элемент, например gif с ромашкой
    $('#WAITER').show();

    $.ajax({
      type: $(this).attr('method'),
      url: $(this).attr('action'),
      data: new FormData(this),
      contentType: false,
      cache: false,
      processData: false,
      success: function(result) {
        //Здесь скрываем/удаляем waiter
        $('#WAITER').hide();
        $('#exampleModal1').arcticmodal();
      },
    });
  });