<!-- loading页面 -->
<th:block
          th:if="${theme.config.other.loadingBoxs.loadingBoxEnable} and not ${#strings.isEmpty(theme.config.other.loadingBoxs.loadingBoxImg)}">
    <style type="text/css">
        #loading-box {
            -webkit-user-select: none;
        }

        #loading-box .loading-bg {
            display: flex;
            width: 100%;
            height: 100%;
            position: fixed;
            background: var(--heo-card-bg);
            z-index: 1999;
            opacity: 1;
            transition: 0.2s;
            pointer-events: all;
            animation: showLoading 0.3s 0s backwards;
        }

        #loading-box.loaded .loading-bg {
            pointer-events: none;
            transition: 0.2s;
            animation: hideLoading 0.3s 0s forwards;
        }

        #loading-box .loading-img {
            width: 100px;
            margin: auto;
            animation-duration: 0.2s;
            animation-name: loadingAction;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        #loading-box .loading-image-dot {
            width: 30px;
            height: 30px;
            background: #6bdf8f;
            position: absolute;
            border-radius: 50%;
            border: 6px solid #fff;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(18px, 24px);
            -moz-transform: translate(18px, 24px);
            -o-transform: translate(18px, 24px);
            -ms-transform: translate(18px, 24px);
            transform: translate(18px, 24px);
        }

        @keyframes loadingAction {
            from {
                opacity: 1;
            }
            to {
                opacity: 0.6;
            }
        }

        @keyframes hideLoading {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        @keyframes showLoading {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
    </style>
    <div id="loading-box" onclick="heo.hideLoading()">
        <div class="loading-bg">
            <img class="loading-img" style="border-radius: 50%;" th:src="${theme.config.other.loadingBoxs.loadingBoxImg}">
            <div class="loading-image-dot"></div>
        </div>
    </div>
    <script>
        var preloader = {
            endLoading: () => {
                //- document.body.style.overflow = 'auto';
                document.getElementById('loading-box').classList.add("loaded")
            },
            initLoading: () => {
                //- document.body.style.overflow = '';
                document.getElementById('loading-box').classList.remove("loaded")
            }
        }
        window.addEventListener('load', preloader.endLoading())
        setTimeout(function () {
            preloader.endLoading();
        }, 3000)
    </script>

</th:block>