如何使用 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中，放置你想要的加载栏。

这里有一个 sn-p，它展示了如何进行这项工作：

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