<!DOCTYPE html>
<html lang="ko">
<head>
<title>로딩</title>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<style>
/* 아래 css 는 css 공통쪽 맨 하단에 삽입 */
.loding_wrap {display:flex; justify-content:center; align-items:center; position:fixed; left:0; top:0; z-index: 9999; width:100%; height:100%; overflow: hidden; background:rgba(255,255,255,0.5);}
.dot-typing {position: relative; width:12px; height:12px; border-radius:50%; background-color:#28bdb4; color:#28bdb4; box-shadow:9984px 0 0 0 #369fc1, 9999px 0 0 0 #28bdb4, 10023px 0 0 0 #28bdb4; animation:dotTyping 1.5s infinite linear; left: -9999px;}
@keyframes dotTyping {
0% {box-shadow:9975px 0 0 0 #369fc1, 9999px 0 0 0 #28bdb4, 10023px 0 0 0 #28bdb4;}
16.667% {box-shadow:9975px -10px 0 0 #369fc1, 9999px 0 0 0 #28bdb4, 10023px 0 0 0 #28bdb4;}
33.333% {box-shadow:9975px 0 0 0 #369fc1, 9999px 0 0 0 #28bdb4, 10023px 0 0 0 #28bdb4;}
50% {box-shadow:9975px 0 0 0 #28bdb4, 9999px -10px 0 0 #369fc1, 10023px 0 0 0 #28bdb4;}
66.667% {box-shadow:9975px 0 0 0 #28bdb4, 9999px 0 0 0 #369fc1, 10023px 0 0 0 #28bdb4;}
83.333% {box-shadow:9975px 0 0 0 #28bdb4, 9999px 0 0 0 #28bdb4, 10023px -10px 0 0 #369fc1;}
100% {box-shadow:9975px 0 0 0 #28bdb4, 9999px 0 0 0 #28bdb4, 10023px 0 0 0 #369fc1;}
}
</style>
</head>
<body>
<div class="loding_wrap">
<div class="dot-typing"></div>
</div>
</body>
<script>
/*** 로딩바 노출 ***/
function loadingShow() {
$('.loding_wrap').show();
}
/*** 로딩바 숨김 ***/
function loadingHide() {
$('.loding_wrap').hide();
}
//Ajax 적용
$.ajax({
type:'post',
url:'www.google.com',
data:formData,
processData:false,
contentType:false,
beforeSend : function(){
loadingShow();
},
complete: function() {
loadingHide();
},
success:function(response){
//do something when ajax successes
},
error:function(error){
//do something when ajax fail
}
});
</script>
</html>
Hej_han