
    <div id="loading_animation" style="
    position: fixed;
    inset:0;
    background-color: #fff;
    z-index: 100000;
    transition: opacity 2.5s ease-in-out, transform 3s ease-in, background-color 1s ease-in;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    ">
        <div id="inside" style="
            opacity: 0; 
            transition: 1.2s ease-in-out;
            transform: scale(.9);
            ">
            <div id="circle"
                style="
                    transition: 2.5s cubic-bezier(0.8, 0.03, 1, 1);
                    background: var(--loader-circle);
                    border: calc(.035 * var(--width)) solid var(--loader-circle-accent);
                    border-right-width: calc(.13 * var(--width));
                    border-left-width: calc(.05 * var(--width));
                    aspect-ratio: 3/4;
                    --width: max(5vw, 100px);
                    width: var(--width);
                    border-radius: var(--width) var(--width) 0 0;
                    margin-inline: auto;
                "></div>
            <h3 style="font-size: 2em; margin-top: .5em; color:var(--loader-text);">Mari & Jona</h3>
        </div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', function() {





            var preloader = document.getElementById('loading_animation');


            if (!document.body.classList.contains('page-template-page-fp')) {
                preloader.style.transition = 'opacity 0.5s ease';
                preloader.style.opacity = '0';
                preloader.style.pointerEvents = 'none';
                setTimeout(function() {
                    preloader.remove();
                }, 5000); // Wait for the fade-out transition to complete
            } else {

                var inside = document.getElementById('inside');
                var circle = document.querySelector('#loading_animation #circle');
                if (preloader) {
                    preloader.style.background = 'var(--loader-bg)';
                    setTimeout(() => {


                        inside.style.opacity = '1';
                        inside.style.transform = 'unset';
                        setTimeout(function() {

                            document.querySelector('#loading_animation h3').style.opacity = 1;
                            document.querySelector('#loading_animation h3').style.transition = '.2s ease';
                            document.querySelector('#loading_animation h3').style.opacity = 0


                            var preloader = document.getElementById('loading_animation');
                            if (preloader) {
                                circle.style.setProperty('--width', '1650vw');
                                // circle.style.transform = 'scale(25)';
                                setTimeout(() => {
                                    preloader.style.opacity = '0';
                                    preloader.style.pointerEvents = 'none';
                                    setTimeout(function() {
                                        preloader.remove();
                                    }, 5000); // Wait for the fade-out transition to complete

                                }, 2500)
                            }
                        }, 3500);
                    }, 1000);

                    //if preloader is clidked it want it to disapear immediately
                    preloader.addEventListener('click', function() {
                        preloader.style.transition = '.5s ease';
                        preloader.style.opacity = '0';
                        preloader.style.pointerEvents = 'none';
                        setTimeout(function() {
                            preloader.remove();
                        }, 5000); // Wait for the fade-out transition to complete
                    });

                }
            }

        });
    </script>


<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://mari-jon.atan.dk/wp-sitemap-index.xsl" ?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>https://mari-jon.atan.dk/wp-sitemap-posts-page-1.xml</loc></sitemap><sitemap><loc>https://mari-jon.atan.dk/wp-sitemap-users-1.xml</loc></sitemap></sitemapindex>
