登録が終わるまでローディングを表示したい

rails6.1.0

初心者につき的外れな質問してるかもしれません。

登録が終わるまでの間ローディングを表示しようと思い、CSSでくるくる回る画像を作成しました。

これをrails側にどう組み込んだら良いのか分かりません。
点と点が繋がらない状態です。。。

登録画面を表示した時は、ローディング画像はdisplay:noneで非表示にしてます。
これを以下の流れのように表示したいです。
１．登録ボタンクリック
２．入力チェック
３．POST送信でローディングを表示
４．POSTが終わればまたローディング非表示（登録完了後は別ページへ遷移するから関係ない？）

すみませんが考え方でも良いので教えていただけると幸いです。
宜しくお願い致します。

登録画面

ruby
1      
2      <div class="user-edit-update-btn">
3        <%= f.submit "更新", class: "btn btn-primary btn-block", data: { disable_with: t("sending") } %>
4      </div>
5
6     <!-- 以下を貼り付けるとloadingが表示されるので最初は非表示にしておく  -->
7     <div class="loading" style="display:none;">
8       <h1>upload...</h1>
9       <svg class="loading-svg" x="0px" y="0px" viewBox="0 0 150 150">
10         <circle class="loading-svg-circle" cx="75" cy="75" r="60"/>
11       </svg>
12     </div>
13

現在は、登録時にjQueryで入力チェックを行ってます。
入力チェック

javascript
1$(document).on('turbolinks:load', function(){
2  
3 
4  $('.user-edit-form').submit(function(e) {
5    
6    // ここで色々と入力チェック
7    // 省略
8  });
9
10  
11});

ローディング

css
1
2.loading {
3  width: 150px;
4  position: fixed;
5  z-index: 1;
6  top: 50%;
7  left: 50%;
8  transform: translate(-50%, -50%);
9  -webkit-transform: translate(-50%, -50%);
10  -ms-transform: translate(-50%, -50%);
11}
12
13.loading > h1 {
14  text-align: center;
15  font-size: 2.5em;
16  margin-bottom: 1em;
17  font-weight: 300;
18  color: #f49420;
19}
20
21.loading-svg {
22  width: 150px;
23  animation: loading 3s linear infinite;
24}
25
26.loading-svg .loading-svg-circle {
27  stroke-dashoffset: 0;
28  stroke-dasharray: 300;
29  stroke-width: 10;
30  stroke-miterlimit: 10;
31  stroke-linecap: round;
32  animation: loading-circle 2s linear infinite;
33  stroke: #f49420;
34  fill: transparent;
35}
36
37@keyframes loading {
38  0% {
39    transform: rotate(0);
40  }
41  100% {
42    transform: rotate(360deg);
43  }
44}
45
46@keyframes loading-circle {
47  0% {
48    stroke-dashoffset: 0;
49  }
50  100% {
51    stroke-dashoffset: -600;
52  }
53}