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

Wordpressでボタンのデザインを表示して、そのボタン部分をクリックすると、ページが遷移してローディング画面を表示したのです。
ボタン部分には追加CSSでcss_animationを指定しています。
Wordpressのフックの操作がよくわからないので、プレビュー画面では、ボタンをクリックしなくても常にローディング画面が表示されています。
ボタン部分をクリックして後にローディング画面を表示したいのですが、PHPからJavascriptを読み込むフックの操作と、DOM操作のコードが上手くかけません。

コンソールでは下記のようなエラーが表示されています。

Failed to load resource: net::ERR_NAME_NOT_RESOLVED　keiko.localscript.js/:1
Uncaught (in promise) Error: The message port closed before a response was received.　keiko.local/:1
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')　　scripts.js?ver=1652403325:7
at window.onload (scripts.js?ver=1652403325:7:44)

なお、当方、wp_enqueue_scriptとwp_enqueue_scriptsの違いもよく理解できていませんので、ご指導の程よろしくお願いします。

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

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

JavaScript
1
2
3
4window.onload = function() {
5
6
7    document.querySelector("css_animation").addEventListener("click",function(){
8    const spinner = document.getElementById('loading');
9    spinner.classList.add('loaded');
10  });
11
12
13
14
15  }
16