How to add .gif in my website loadinf screen

I have a script that show me a square that rotates in the website (loading screen). Im just trying to edit but without result. Can you help me pls?

I use aruba for hosting my website.

How can i do that with a .gif image?

Thank you all!!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

""The code of animation square inside""

    <div class="loader-wrapper">
      <span class="loader"><span class="loader-inner"></span></span>
    </div>

    <script>
        $(window).on("load",function(){
          $(".loader-wrapper").fadeOut("slow");
        });
    </script>