<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!-- loading 页面，todo 这块都可以不要，后面删除，先精简代码，后续考虑组件添加 -->
<div id="loading-box" onclick="heo.hideLoading()"
     th:fragment="loading-box"
     th:if="${theme.config.other.loadingBoxs.loadingBoxEnable} and not ${#strings.isEmpty(theme.config.other.loadingBoxs.loadingBoxImg)}">


    <style type="text/css">

        #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);
        }

        #loading-box {
            -webkit-user-select: none;
        }

        #loading-box .loading-bg {
            display: flex;
            width: 100%;
            height: 100%;
            position: fixed;
            background: var(--heo-background);
            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;
        }

        @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 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>

    <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>

</div>

</html>