Design a unique preloader

gistfile1.txt

<!-- Preloader HTML -->
    <div id="preloader">
        <!-- Add your preloader content here -->
        <p>Loading...</p>
    </div>

    <!-- Your website content goes here -->
 /* Add your preloader styles here */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
    <script>
        $(document).ready(function () {
            // Check if the session cookie is set
            if (document.cookie.indexOf('preloaderShown=true') === -1) {
                // Show the preloader
                $("#preloader").delay(3000).fadeOut("slow");
                // Set the session cookie
                document.cookie = 'preloaderShown=true; path=/';
            } else {
                // If the session cookie is set, hide the preloader immediately
                $("#preloader").hide();
            }
        });
    </script>