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

Question

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の違いもよく理解できていませんので、ご指導の程よろしくお願いします。

//  ******************************************  ローディング画面 ******************************

 




	function add_scripts() {
		wp_enqueue_script('css_animation', 'script.js','', '',true );

	 echo '<div id="loading">';
	 echo '<div class="spinner"></div>'; 
	 echo '</div>' ;
	 
	 
	 //  コンテンツ部分 
	 
	 echo '<div class="gallery">';
	 echo '<div class="item">' ;
	 // echo '<img src="images/img1.jpg" alt="">';
	 echo '</div>' ;
	 
	 echo '<div class="item">';
	 // echo '<img src="images/img2.jpg" alt="">';
	 echo '</div>';
	 
	 // ・・・ 以下コンテンツ略 ・・・ 
	 
	 echo '</div>';
	
	
	}



 add_action('wp_enqueue_scripts', 'add_scripts' );

/************************************ ローディング画面 ***********************************/
#loading {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background-color: #0bd;
    
  }
  .spinner {
    width: 100px;
    height: 100px;
    margin: 200px auto;
    background-color:yellow;
    border-radius: 50%;
    animation: sk-scaleout 3.0s infinite ease-in-out;
  }
  /* ローディングアニメーション */
  @keyframes sk-scaleout {
    0% {
      transform: scale(0);
    } 100% {
      transform: scale(1.0);
      opacity: 0;
    }
  }
   
  /* コンテンツ部分の装飾 */
  .gallery {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .loaded {
    opacity: 0;
    visibility: hidden;
  }
  

window.onload = function() {


    document.querySelector("css_animation").addEventListener("click",function(){
    const spinner = document.getElementById('loading');
    spinner.classList.add('loaded');
  });




  }

Answer 1

実装することを取りやめました。
自己解決しました。