<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.0/lottie.min.js" type="text/javascript"></script>

<style>

    #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #FFFFFF; /* צבע הרקע של האנימציה */
            transition: transform 0.5s ease-in-out;
            z-index: 99999;
        }

        #preloader-lottie {
            width: 30vw;  /* רוחב הלוטי בדסקטופ */
        }

        @media (max-width: 1025px) {
            #preloader-lottie {
                width: 250px;    /* רוחב הלוטי בטאבלט וטלפון */
            }
        }


</style>

<div id="preloader">
  <div id="preloader-lottie"></div>
</div>



<script>
     window.addEventListener("DOMContentLoaded", () => {
            const preloader = document.getElementById("preloader");

            setTimeout(() => {
                preloader.style.transform = "translateY(100%)"; // אפקט יציאה למעלה

                setTimeout(() => {
                    preloader.style.display = "none"; 
                }, 500); // משך זמן אפקט היציאה
            }, 5500); // משך זמן השהייה של האנימציה, ניתן לשנות למספר נמוך יותר כדי לקצר
        });

        lottie.loadAnimation({
            container: document.getElementById("preloader-lottie"),
            renderer: "svg",
            loop: true,
            path: "https://lottie.host/861d4cfd-c61a-4050-aa3e-c27239e358d2/6TOgd6hAw2.json",
            rendererSettings: {
                progressiveLoad: false
            },
            events: {
                complete: () => console.log('Preloader works!'),
                error: (e) => console.error(e)
            }
        });
</script>