Cakephp3で待機中（処理中）にアニメーションを表示したいです。

こんにちは、CAKEPHP3で簡単なメール送信システムを作りました。

機能的には問題なく動きますが、メール送信ボタンを押すとメール送信までけっこう時間がかかります。
その時、ブラウザーの左下に、url/待機中　などのメッセージが表示されますが、小さいのであまり目に入ってこないです。
そこで、何かアニメーションを入れてみたいと思い、このリンク先を参考にして作ってみました。
http://ysklog.net/jquery/2120.html

php
1<?php
2/**
3  * @var \App\View\AppView $this
4  * @var \App\Model\Entity\Contract[]|\Cake\Collection\CollectionInterface $contract
5  */
6?>
7
8<style>
9  #loading{
10position:absolute;
11left:50%;
12top:20%;
13margin-left:-30px;
14  }
15</style>
16
17<div class="row">
18  <div class="col-sm-12">
19
20　　//表示したいイメージです。
21    <div id="loading">
22      <?= $this->Html->image('loading.png', ['alt' => 'メール送信中…']); ?>
23    </div>
24
25    <div id="contents" class="contract index columns content">
26        <legend><?= __(契約者一覧') ?></legend>
27
28        <?= $this->Flash->render() ?>
29
30        <div class="row" align="right">
31            <?= $this->Html->link(
32                '追加',
33                ['controller' => 'Contract', 'action' => 'add'],
34                ['class' => 'btn btn-primary', 'role' => 'button']
35            ); ?>
36        </div>
37
38        <table cellpadding="0" cellspacing="0" class="table table-striped table-hover ">
39            <thead>
40                <tr>
41                    <th scope="col"><?= $this->Paginator->sort('id','#') ?></th>
42                    <th scope="col"><?= $this->Paginator->sort('loginid','アカウント') ?></th>
43                    <th scope="col"><?= $this->Paginator->sort('memo','備考') ?></th>
44                    <th scope="col" class="actions"><?= __('編集メニュー') ?></th>
45                    <th scope="col" class="actions"><?= __('パスワード更新') ?></th>
46                </tr>
47            </thead>
48            <tbody>
49                <?php foreach ($contract as $contract): ?>
50                <tr>
51                    <td><?= $this->Number->format($contract->id) ?></td>
52                    <td><?= h($contract->loginid) ?></td>
53                    <td><?= h($contract->memo) ?></td>
54                    <td class="actions">
55                        <?= $this->Html->link(
56                            '詳細',
57                            ['controller' => 'Contract', 'action' => 'view', $contract->id],
58                            ['class' => 'btn btn-info btn-xs', 'role' => 'button']
59                        ); ?>
60                        <?= $this->Html->link(
61                            '修正',
62                            ['controller' => 'Contract', 'action' => 'edit', $contract->id],
63                            ['class' => 'btn btn-warning btn-xs', 'role' => 'button']
64                        ); ?>
65                        <?php echo $this->Form->postLink(
66                            '削除',
67                            ['controller' => 'Contract','action' => 'delete', $contract->id],
68                            ['escape' => false, 'class' => 'btn btn-danger btn-xs', 'role' => 'button',
69                              'confirm' => __('#{0}の情報を本当に削除しますか?', $contract->id)]
70                        ); ?>
71                    </td>
72                    <td>
73                      <?= $this->Html->link(
74                          'メール送信',
75                          ['controller' => 'Contract', 'action' => 'mailSend', $contract->id],
76                          ['class' => 'btn btn-success btn-xs', 'role' => 'button']
77                      ); ?>
78                    </td>
79                </tr>
80                <?php endforeach; ?>
81            </tbody>
82        </table>
83
84    </div>
85  </div>
86
87</div>
88
89
90<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
91<script type="text/javascript">
92<!--
93//コンテンツの非表示
94$(function(){
95    $('#contents').css('display', 'none');
96});
97//ページの読み込み完了後に実行
98window.onload = function(){
99    $(function() {
100        //ページの読み込みが完了したのでアニメーションはフェードアウトさせる
101        $("#loading").fadeOut();
102        //ページの表示準備が整ったのでコンテンツをフェードインさせる
103        $("#contents").fadeIn();
104    });
105}
106  //-->
107</script>
108