hutao/reference/react-template/public/loading.css

body{
    background: #111111;
}
#root{
    position: relative;
    background: #fefefe;
    height: 100vh;
    width: 100vw;
}
.openRoot{
    animation: openRoot linear 1500ms;
}
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-height: 200px;
    min-width: 200px;

    display: flex;
    align-items: center;
    justify-content: center;

}
#loaderBox{
    opacity: 1;
    transition: opacity linear 1000ms;
}
.hideLoader{
    opacity: 0 !important;
}

#upFace{
    position: absolute;
    height: 50%;
    width: 100%;
    top: 0;
    left: 0;
    background: #111;
    transition: top linear 1500ms;
}
#downFace{
    position: absolute;
    height: 50%;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #111;
    transition: bottom linear 1500ms;
}
.upOpen{
    top: -50vh !important;
}
.downOpen{
    bottom: -50vh !important;
}

#loader {
    position: relative;
    width: 60px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side, #aaa 90%, #fff0);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100% / 3) 50%;
    animation: l3 1s infinite linear;
}
#loaderText{
    position: relative;
    text-align: center;
    color: #fefefe;
    line-height: 40px;
    user-select: none;
    color: #666;
}


@keyframes l3 {
    20% {
        background-position: 0% 0%, 50% 50%, 100% 50%;
    }
    40% {
        background-position: 0% 100%, 50% 0%, 100% 50%;
    }
    60% {
        background-position: 0% 50%, 50% 100%, 100% 0%;
    }
    80% {
        background-position: 0% 50%, 50% 50%, 100% 100%;
    }
}
@keyframes openRoot {
    from{
        transform: scale(0.7)
    }
    to{
        transform: scale(1)
    }
}