반응형
자바스크립터와 CSS로 간단하게 로더를 만드는 코드입니다.
jquery 라이브러리를 함께 사용합니다.
CSS
.loadingPopup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
z-index: 1000;
justify-content: center;
align-items: center;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
border: 8px solid #f3f3f3; /* Light grey */
border-top: 8px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
animation: spinner 2s linear infinite;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
JS
// Loader 보여짐
function showLoading(){
var loadindgDiv = $(".loadingPopup");
if(loadindgDiv == undefined || loadindgDiv.length == 0){
$("body").append($("<div class='loadingPopup'><div class='spinner'></div></div>"));
loadindgDiv = $(".loadingPopup");
}
loadindgDiv.css("display", "block");
}
// Loader 숨김
function closeLoading(){
$(".loadingPopup").css("display", "none");
}
반응형
'Javascript' 카테고리의 다른 글
자바스크립트 크롬에서 엣지로 링크 열기 (0) | 2023.11.08 |
---|---|
자바스크립트 ==와 ===의 차이점 (0) | 2023.10.25 |
자바스크립트 "YYYY-MM-DD" 형식의 문자 날짜 체크 (0) | 2023.08.29 |
[SlickGrid] 셀(Cell)에 툴팁(Tooltip) 표시하기 (0) | 2023.07.13 |
HTML의 특정 Input에 붙여넣기 못하게 처리하는 방법 (0) | 2022.09.22 |
댓글