@if(theme_option('preloader_version', 'v1') === 'v1')
    <div id="preloader">
        <div id="loading-center">
            <div class="loader">
                <div class="loader-outter"></div>
                <div class="loader-inner"></div>
            </div>
        </div>
    </div>
@else
    <style>
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99999;
            background-color: rgba(255, 255, 255, 0.82);
        }

        #preloader .preloader-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
        }

        #preloader .preloader-loading::after {
            content: " ";
            display: block;
            border-radius: 50%;
            border-width: 1px;
            border-style: solid;
            -webkit-animation: lds-dual-ring 0.5s linear infinite;
            animation: lds-dual-ring 0.5s linear infinite;
            width: 40px;
            height: 40px;
            border-color: var(--primary-color) transparent var(--primary-color) transparent;
        }

        @keyframes lds-dual-ring {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        @-webkit-keyframes lds-dual-ring {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <div id="preloader">
        <div class="preloader-loading"></div>
    </div>
@endif
