로딩창을 html 로 따로 만드는 것이 좋다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading</title>
</head>
<body>
<div id="load">
<div id="preloader">
<div id="loader"></div>
</div>
</div>
<script>
const loading_page = document.getElementById("load");
window.onload = function(){
loading_page.style.display = 'none';
}
</script>
</body>
</html>CSS
#load{
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background: black;
text-align: center;
z-index: 9999999;
}
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #9370DB;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #BA55D3;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FF00FF;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}jsp includ 형식으로 풀러와도 되고
thymeleaf 면 thymeleaf-layout-dialect 방식을 사용해서 페이지 마다 세팅해주면 편하다.
ajax 처리방법
beforeSend , complete 를 쓰자~
$.ajax({
url: "/check",
method: 'POST',
datatype: 'JSON',
data: param,
success: function (dataMap) {
궁시렁..궁시렁
},
//완료 되기 전
beforeSend:function(){
loading_page.style.display = 'block'
},
//완료 된 후
complete:function(){
loading_page.style.display = 'none'
},
error: function () {
궁시렁..궁시렁
}
});'JavaScript' 카테고리의 다른 글
| [JavaScript] 페이징 (0) | 2024.10.15 |
|---|---|
| [JavaScript] 쓸만한 유틸 모음 (0) | 2024.04.24 |
| [JavaScript] 드래그 & 드롭 (0) | 2024.04.24 |
| [Javascript] 공인 IP 가져오기 (0) | 2023.12.01 |
| [JavaScript] 정규식 모음 (0) | 2023.09.12 |
로딩창을 html 로 따로 만드는 것이 좋다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading</title>
</head>
<body>
<div id="load">
<div id="preloader">
<div id="loader"></div>
</div>
</div>
<script>
const loading_page = document.getElementById("load");
window.onload = function(){
loading_page.style.display = 'none';
}
</script>
</body>
</html>CSS
#load{
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background: black;
text-align: center;
z-index: 9999999;
}
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #9370DB;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #BA55D3;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FF00FF;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}jsp includ 형식으로 풀러와도 되고
thymeleaf 면 thymeleaf-layout-dialect 방식을 사용해서 페이지 마다 세팅해주면 편하다.
ajax 처리방법
beforeSend , complete 를 쓰자~
$.ajax({
url: "/check",
method: 'POST',
datatype: 'JSON',
data: param,
success: function (dataMap) {
궁시렁..궁시렁
},
//완료 되기 전
beforeSend:function(){
loading_page.style.display = 'block'
},
//완료 된 후
complete:function(){
loading_page.style.display = 'none'
},
error: function () {
궁시렁..궁시렁
}
});'JavaScript' 카테고리의 다른 글
| [JavaScript] 페이징 (0) | 2024.10.15 |
|---|---|
| [JavaScript] 쓸만한 유틸 모음 (0) | 2024.04.24 |
| [JavaScript] 드래그 & 드롭 (0) | 2024.04.24 |
| [Javascript] 공인 IP 가져오기 (0) | 2023.12.01 |
| [JavaScript] 정규식 모음 (0) | 2023.09.12 |
