Wordpressでローディング画面を表示したい。

wordpressで作成中のローディングアニメーションですが、wordpressのフックを使ってクリック操作すればローディングアニメーションを表示したいです。
フックを学習中ですが、関数操作が苦手のため、完成できないでいます。
JavaScript ファイルをPHP側から読み込みするところから、JSでロードが完了したらローディング画面部分が動作するようにするところまでの
コードレビューをお願いします。
ネットから拾ってきたコードを組み合わせていますので、分かりづらいかと思いますが、よろしくおねがいします。

PHP
1コード
2
3
4//  ******************************************  ローディング画面 ******************************
5
6 
7
8
9add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
10
11do_action(‘wp_enqueue_scripts’)
12
13
14
15
16 function func(){
17
18	wp_enqueue_script( 'script_animation', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );
19	 
20	 echo '<div id="loading">';
21	 echo '<div class="spinner"></div>'; 
22	 echo '</div>' ;
23	 
24	 
25	 //  コンテンツ部分 
26	 
27	 echo '<div class="gallery">';
28	 echo '<div class="item">' ;
29	 // echo '<img src="images/img1.jpg" alt="">';
30	 echo '</div>' ;
31	 
32	 echo '<div class="item">';
33	 // echo '<img src="images/img2.jpg" alt="">';
34	 echo '</div>';
35	 
36	 // ・・・ 以下コンテンツ略 ・・・ 
37	 
38	 echo '</div>';
39	
40	
41	}
42	
43add_action('myaction','func');
44 do_action('myaction');
45
46
47	 ?>

CSS
1コード
2/************************************ ローディング画面 ***********************************/
3#loading {
4    width: 100vw;
5    height: 100vh;
6    transition: all 1s;
7    background-color: #0bd;
8    
9  }
10  .spinner {
11    width: 100px;
12    height: 100px;
13    margin: 200px auto;
14    background-color:yellow;
15    border-radius: 50%;
16    animation: sk-scaleout 3.0s infinite ease-in-out;
17  }
18  /* ローディングアニメーション */
19  @keyframes sk-scaleout {
20    0% {
21      transform: scale(0);
22    } 100% {
23      transform: scale(1.0);
24      opacity: 0;
25    }
26  }
27   
28  /* コンテンツ部分の装飾 */
29  .gallery {
30    display: grid;
31    gap: .5rem;
32    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
33  }
34  img {
35    width: 100%;
36    height: 200px;
37    object-fit: cover;
38  }
39  
40  .loaded {
41    opacity: 0;
42    visibility: hidden;
43  }
44

Javascript
1コード
2
3window.onload = function() {
4
5  script_animation=document.querySelector(".css_animation").addEventListener("click",function(){
6    const spinner = document.getElementById('loading');
7    spinner.classList.add('loaded');
8  });
9
10  }
11