간단한 로딩기능을 구현해보자
1. HTML
body 바로 밑에다가 넣어주자
로딩스피너가 보여질때 다른레이어에 가려지지 않도록 화면레이어 제일 상단에 위치해야함
or z-index 제일 크게 설정
<body>
<div id="loadingSpinner"></div>
.
.
.
</body>
2.CSS
#loadingSpinner {
display: none;
position: fixed;
z-index: 9999999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 9px solid #ffffffc9;
border-radius: 82%;
border-top: 9px solid #225cc1;
width: 100px;
height: 100px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
3.JS
function showLoading() {
document.getElementById('loadingSpinner').style.display = 'block';
}
function hideLoading() {
document.getElementById('loadingSpinner').style.display = 'none';
}
4.활용
function save() {
if (ckSave) {
var idx = clickId;
var file = getFileList();
var formData = new FormData();
formData.append("uploadFile", file);
formData.append("idx", idx);
// 로딩 애니메이션 표시
showLoading();
$.ajax({
type: 'POST',
url: '/api/saveyourfile',
enctype: 'multipart/form-data',
processData: false,
contentType: false,
data: formData,
dataType: 'json',
success: function(res) {
console.log("success " + res);
// 완료 후 페이지 새로고침
location.href = location.href;
},
error: function(xhr, status, error) {
var errorMessage = xhr.responseJSON.error;
alert(errorMessage);
},
complete: function(xhr, status) {
// 로딩 애니메이션 숨김
hideLoading();
ckSave = false;
}
});
} else {
alert("입력 버튼을 클릭한 후 내용 작성 바랍니다");
}
}
반응형
'웹 개발 > 🌐 JavaScript' 카테고리의 다른 글
| setInterval시 유의사항 (0) | 2024.08.07 |
|---|---|
| JS | 특정 태그의 자식 태그 개수를 파악하는 법 (0) | 2024.07.01 |
| JS | eCharts 사용시 echarts.js:2286 Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload. 에러 (0) | 2024.04.03 |
| JavaScript | localeCompare를 이용한 배열안에서 정렬하는법 (0) | 2024.04.02 |
| forEach시 null값처리 (0) | 2024.03.15 |
