How can I add preloader in my custom wordpress theme?

I’m trying to add preloader on my theme. When I’m using this code in functions.php then It work fine. But I’m not interest use CSS & JS on functions.php

Please help me.

add_action('init', 'Devnuru_Preloader');
function Devnuru_Preloader()
{
  if (! is_admin() &&  $GLOBALS["pagenow"] !== "wp-login.php") {

    $delay = 1;  //seconds
    $loader = 'http://devnuru.local/wp-content/uploads/2024/09/devnuru-spinner.svg';
    $overlayColor = '#ffffff';
    echo '<div class="Preloader"><img 

src="' . $loader . '" alt="" style="height: 150px;"></div>

 <style>
.Preloader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: ' . $overlayColor . ';
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>

<script>
document.body.style.overflow = "hidden";
document.addEventListener

("DOMContentLoaded", () => setTimeout( function() { 

document.querySelector("div.Preloader").remove(); 

document.body.style.overflow = "visible"; } , ' . $delay . ' * 1000));
</script>
';
  }
}

When I’m putting HTML Code in my footer & CSS code in my main CSS file & JS code in JS file then It’s not working.