Jquery（Ajax）でLoadingの表示がでない

下記のように、非同期通信がcompleteするまでgif-load.gif（読み込み中）画像を
表示したいのですが、表示されません。
ディベロッパーツールで指定の要素（#loading）に<img src='./gif-load.gif'>要素が生成されている
ことは確認できたのですが、実際に表示上は何も出てきません。
どのような問題点が考えられますでしょうか。
不足があればお申し付け下さい。

宜しくお願い申し上げます。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<title>計算結果</title></title>
5<link href="./C_image/generator/gif-load.gif" rel="stylesheet" type="text/css" />
6<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
7</head>
8
9<body>
10<div id="ind_box" style="padding-left:20px;border:solid 1px #e0e0e0;position: absolute;left:870px;top:600px;width:300px;height:330px;font-size:13px;">
11<div style="position:absolute;font-size:12px;left:5px;top:3px;"><i class="fa fa-caret-right" aria-hidden="true"></i><span>比較</span>
12<div id="loading"></div>
13</div>
14
15<script type="text/javascript">
16
17$( function(){
18       $(".tfac_good").on('click',
19          function() {
20          $("#loading").html("<img src='./gif-load.gif'>");
21             $.ajax({
22                url: "ajx.php",
23                type: "POST",
24              data: { id:get_id,boxA:boxA,boxB:boxB,boxC:boxC,boxD:boxD,boxE:boxE,
25                      Cal_1:Cal_1,Cal_2:Cal_2,Cal_3:Cal_3,Cal_4:Cal_4,
26                      Pri_1:Pri_1,Pri_2:Pri_2,Pri_3:Pri_3,Pri_4:Pri_4,
27                      Num_fuctor:Num_fuctor,Meth:Meth,Cal_name:Cal_name}, 
28             // dataType: 'json', 
29                success: function(data){
30                  // alert(data);
31                  $('#create_1').remove();
32                  $('#ind_box').append(data);
33                },
34                // complete : function(data) {
35                //                     $("#loading").empty();
36                //                }
37             });
38          }
39       );
40    });
41</body>