画面の一部にだけajaxで処理中のみローディング表示させるには？

Question

#やりたいこと
・ある画面のロード
・同じ画面で選択したラジオボタンの値によって
この２つのタイミングで、画面の一部にのみローディングアイコンを表示させたいです。

検索してみると、画面全体のローディングはたくさんヒットしたのですが、部分的（画面の一部のみ）にローディングアイコンを表示させる方法は見つかりませんでした。

どのようにしたら画面の一部のみローディング表示できますか？

<!-- HTML内 -->
<div id="result" ></div>
<div class="loading">
<!-- <div class="loading_icon"></div> -->
</div>
<!-- 他の画像やフォームなど-->
<script>
$(function(){
   	$(document).ready( function(){
		var date = $("#date").val();
		$.ajax({
			url: "/example/getlist.php",
			method: "POST",
			data: { date: date},
			dataType: 'json',
		}).done(function(data) {
			$("#result").html(data.msg);
		}).fail(function(jqXHR, textStatus, errorThrown) {
			console.log(textStatus);
		});
	});

#試したこと

.is-hide{
	 display:none;
	}
	.loading{
	  position:fixed;
	  top:0;
	  right:0;
	  bottom:0;
	  left:0;
	  background:#f2f2f2;
}
.loading::before{
	  content:"";
	  display:block;
	  position:fixed;
	  left:50%;
	  top:50%;
	  width:50px;
	  height:50px;
	  border-radius:5px;
	  margin-top:-15px;
	  margin-left:-15px;
	  background:white;
	}
.loading::after{
	  content:"";
	  display:block;
	  position:fixed;
	  left:50%;
	  top:50%;
	  width:32px;
	  height:32px;
	  border-radius:20px;
	  margin-top:-10px;
	  margin-left:-10px;
	  border:4px solid #60ABB9;
	  border-right:4px solid white;
	  animation: rotate 1s infinite linear;
	}

これだと
画面全体がローディングアイコンになってしまう
HTMLは表示させ、divの部分にのみアイコンを出力したい

Answer 1

画面の一部のみローディング表示

ローディング表示に一部も全部もないと思いますが・・・
例示のソースでいうと

<div class="loading"></div>

にローディングのアイコンもしくはテキストを表示し、
ajaxがdoneされたときに消せば良いでしょう

命題にラジオボタンについては該当する部分が見当たらないのでなんとも言えません

sample

• html

<script>
$(function(){
  $(document).ready( function(){
    var c=0;
    var timerId=setInterval(function(){c=c>=3?0:c+1;$('.loading').html("loading"+".".repeat(c))},500);
    $.ajax({
    url: "hoge.php",
    method: "POST",
    }).done(function(data) {
      $("#result").html(data);
      clearInterval(timerId);
      $('.loading').html("");
    }).fail(function(xhr, err){
      console.log(textStatus);
    });
  });
});
</script>
<div id="result" ></div>
<div class="loading"></div>

• hoge.php

<?php
sleep(5);
print "load complete";

Comments

[sakura-shi]

ためしたCSSを掲載しました
これだと、画面全体がローディングになってしまうのです。
これが問題です

HTMLの一部分にのみローディングアイコンを表示するようにしたいです

[yambejp]

sampleつけておきました

[sakura-shi]

ありがとうございました