javascript - 我怎样才能用 Jekyll 做一个预加载页面？

Question

好吧，我对JS几乎一无所知，在codepen上找到了这个预加载页面样式

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 870px;
    background-color:#000;
    position: relative
}

p{
    font-weight: bold;
    font-size: 30px;
    color:#00ff00;
    display: inline
}

div{
    display: flex;
    justify-content: center;
    align-items: center;
    width:400px;
    height:400px
}

div > span{
    background-color:transparent;
    height:190px;
    width:190px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border:20px solid transparent;
    border-bottom:20px solid red;
    border-top:20px solid red;
    animation: rotateleft 1.25s infinite ease-in-out;
    position: absolute;
}

div > span ~ span {
    background-color:transparent;
    width:150px;
    height:150px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border:20px solid transparent;
    border-left:20px solid red;
    border-right:20px solid red;
    animation: rotateright 1.25s infinite ease-in-out;
    position: absolute;
}

section{
    position: absolute;
    width:;
    overflow: hidden;
    animation: words 2.5s infinite ease-in-out
}

@keyframes words{
    from {
        width:0
    }
    
    to{
        width:130px
    }
    
}

@keyframes rotateleft{
    from{
        transform: rotate(0)
    }
    
    to{
        transform: rotate(-360deg)
    }
}

@keyframes rotateright{
    from{
        transform: rotate(0)
    }
    
    to{
        transform: rotate(360deg)
    }
}

<section><p>Loading...</p></section>
        <div>
            <span></span>
            <span></span>
        </div>

我想将它用于我的网站，该页面会在网站加载之前出现。我怎样才能用 Jekyll 做到这一点？那是我可以说应该在索引之前调用它的地方吗？我是否需要 JS 函数，或者仅使用此示例(仅使用 html 和 css)就可以做到这一点。

Answer 1

使用 Jquery，你可以做这样的事情:

$(window).load(function(){
   $('#overlay').fadeOut();
});

然后在你的#overlay div 中，放置你想要的加载栏。

下面是一个片段，展示了如何实现这一点:

$(window).load(function(){
   $('#overlay').fadeOut(2000);
});

#overlay {
    position: fixed; /* Sit on top of the page content *
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,1.0); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay"></div>
<span>You cannot see this if the overlay is here</span>