글쓰기와 코멘트 쓰기를 할때 로딩페이지를 넣으려면...???
본문
글쓰기와 코멘트 쓰기를 할때 로딩페이지를 넣으려고 합니다.
어떻게 넣어야 할까요.?
<!-- 스타일 { -->
<style>
/* 로딩전 화면을 가리기 위한 꼼수 */
#loadings {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #ffffff;
z-index: 999999;
}
/* 로더 */
#loading_api {
position: absolute;
width: 50px;
height: 50px;
border: 2px solid rgba(0, 0, 0, .1); /* 컬러 */
border-radius: 50%;
border-top-color: #0099ff; /* 컬러 */
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* 로더 애니메이션 */
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
}
}
</style>
<!-- 아래 제이쿼리는 그누보드/영카트의 경우 로드되어 있으니 빼주시면 됩니다. { -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- } -->
<!-- 로더 시작 { -->
<div id="loadings">
<div id="loading_api"></div>
</div>
<script>
// DOM을 포함한 페이지가 준비가 되면 사라집니다.
$(window).on("load", function() {
$('#loadings').fadeOut(500);
});
// 좀 더 늦게 사라지게 할 경우 아래코드 사용
// setTimeout(function() { 의 500 숫자로 조절가능
/*
$(window).on("load", function() {
setTimeout(function() {
$('#loading').fadeOut(500);
}, 500);
});
*/
</script>
<!-- } 로더 끝 -->