지클로 사전로드 페이지를 만들려면 어떻게해야합니까? 좋아

Question

, 내가 JS에 대해 거의 아무것도 몰라이 페이지는 사이트가로드되기 전에 나타납니다,

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>

나는 내 웹 사이트에이를 사용하고자하는 codepen

에이 프리로드 페이지 스타일을 발견했다. 지킬로 어떻게 할 수 있니? 인덱스 이전에 이것을 호출해야한다고 말할 수있는 곳입니까? 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>