# FakeLoader
페이지 로딩이나 데이터 처리가 시간이 오래 걸릴 경우, 사용자에게 작업 진행 상태를 시각적으로 알려주지 않으면 사용자는 작업 완료 여부를 알 수 없어 다른 작업을 하거나 페이지를 새로고침할 수 있다
CSS를 사용하여 직접 로딩 화면을 구현할 수 있지만, fakeLoader플러그인을 이용하면 간편하게 페이지 로딩 화면을 구현할 수 있다
📢 저는 토글 버튼을 ON / OFF 할때 Bash로 도커 컨테이너 START, STOP 하도록 만들었는데
컨테이너의 상태를 변경하는 시간동안 로딩화면을 띄우도록 하였습니다.
1. FakeLoader 다운로드
FakeLoader 깃 허브에서 ZIP 파일로 다운로드
다운로드 한 파일 압축을 풀고 dist 폴더에 있는 fakeLoader.min.css와 fakeLoader.min.js
두 파일을 프로젝트 css, js 폴더에 넣는다
2. HTML 작성
2.1 ) css. js 파일 로드
FakeLoader를 사용하기 위해 필요한 jquery, 그리고 위 두 파일을 head에 넣어준다
<head>
...
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="/경로/fakeLoader.min.css">
<script type="text/javascript" src="/경로/fakeLoader.min.js"></script>
...
</head>
2.2 ) DIV 추가
body태그 안에 calss와 id값이 fakeLoader인 div 추가하기
(id값은 다른 값으로 변경해도 되는데 class는 무조건 fakeLoader로 해야됩니다)
이때 style에 display:none 설정해 줘야됨
DIV를 숨기지 않으면 페이지 가장 위에 fakeLoader가 올라오게 되어 다른 동작을 실행할 수 없음
📢 불투명한 흰색으로 배경을 설정하고 싶어 style에 opacity를 같이 넣었습니다.
<div class="fakeLoader" id="fakeLoader" style="display: none; opacity: 0.7;"></div>
2.3 ) Script 구현
📢 토글 버튼이 아닌 다른 버튼, 이벤트에 넣고싶으면 원하는 코드에 맞게 수정해주세요
① fakeLoader 초기화
먼저 화면에 출력될 fakeLoader를 초기화해야 됨
로딩 화면 출력 시간보다 작업 처리 시간이 오래걸리면 로딩화면이 먼저 사라지는데 그걸 방지하기 위해서 시간을 60초로 설정
- timeToHide : 로딩화면 출력 시간 (1000 : 1초)
- bgColor : 배경색
- spinner : 스피너 타입
// fakeLoader 초기화
$.fakeLoader({
timeToHide : 60000,
bgColor : '#fff',
spinner : 'spinner4',
});
② fakeLoader 시작
처음에 display : none 으로 설정해 숨겨놨던 것을 show()를 통해 보이도록 설정
// 숨겼던 fakeLoader 보이게 설정
$("#fakeLoader").show();
③ 작업 처리 및 fakeLoader 종료
ajax 요청하여 작업을 처리하고 수동으로 fakeLoader를 숨겨주기
setTimeout으로 1초 지연해주는 이유는 fakeLoader가 보여지기 전에 실행될 수 있기때문에 1초 기다렸다가 작업을 실행하도록 하였습니다
💡 ajax 요청에서 complete는 성공 에러 상관없이 모든 요청이 완료된 후에 실행됨
setTimeout(function() {
$.ajax({
// .. 요청 옵션
success: function(data) {
// 성공
},
error: function() {
// 실패
},
complete: function() {
$('#fakeLoader').fadeOut();
}
});
}, 1000);
3. Spinner 스타일 설정
fakeLoader.min.css에서 로딩바의 기본 색상은 흰색이다.
이 색을 다른 색으로 변경하고 싶으면 css를 수정해주면 되는데
background-color를 검색하거나 초기 색상인 #fff를 검색해서 바꿔준다
4. 전체 코드 및 결과
<!DOCTYPE html>
<html>
<head>
<title>toggle</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/fakeLoader.min.css">
<script type="text/javascript" src="/js/fakeLoader.min.js"></script>
<style>
/* 토글 */
.container {
margin: 20px;
display: flex;
flex-direction: column;
}
/* 기존의 checkbox 버튼 숨기기 */
.toggle-input {
display: none;
}
/* 토글 스타일 지정*/
.toggle-label {
position: relative;
display: block;
width: 40px;
height: 24px;
background-color: #ccc;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 토글 버튼 스타일 지정 */
.toggle-label::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s ease;
}
/* 토글 ON 스타일 지정*/
.toggle-input:checked+.toggle-label {
background-color: #4caf50; /* 배경색 변경 */
}
/* 토글 ON인 경우에 버튼 위치 지정 */
.toggle-input:checked+.toggle-label::before {
transform: translateX(16px);
}
</style>
</head>
<body>
<div class="fakeLoader" id="fakeLoader" style="display: none; opacity: 0.7;"></div>
<div class="container">
<input type="checkbox" class="toggle-input" id="toggle" onclick="toggleEvent()" />
<label class="toggle-label" for="toggle"></label>
</div>
<script>
function toggleEvent() {
// fakeLoader 초기화
$.fakeLoader({
timeToHide : 60000,
bgColor : '#fff',
spinner : 'spinner3',
});
// 숨겼던 fakeLoader 보이게 설정
$("#fakeLoader").show();
setTimeout(function() {
$.ajax({
url: '/engine/modifyLiveAt.proc.json',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
// 전송 데이터
}),
dataType : "json",
async : false,
success: function(data) {
// 성공
},
error: function() {
// 실패
element.checked = !isChecked;
},
complete: function() {
$('#fakeLoader').fadeOut();
}
});
}, 1000);
}
</script>
</body>
</html>