Jekyllでプリロードページを実行するにはどうすればよいですか？

Question

[OK]を、私は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>

にこのプリロードページのスタイルを見つけた私は、このページには、サイトの負荷の前に現れるでしょう、私のウェブサイトのためにこれを使用したいと思います。私はジキルとどうしたらいいですか？ インデックスの前にこれを呼び出す必要があると言える場所ですか？私はJS関数が必要か、この例でこれを行うことは可能ですか（htmlとcssのみを使用します）。 jQueryを使って

Answer 1

は、あなたがこのような何かを行うことができます。

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