web spinner

 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style>
#loading{
display:none;
}

#loading .loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2000;
    margin: -75px 0 0 -60px;
    border: 16px solid rgb(244, 244, 244, 0.3);
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#loading .overay{
  position:fixed;
	width:100vw;
	height:100vh;
	background:rgba(0,0,0,0.5);
	z-index:1100;
	display:block;
	top:0;
}
</style>

<div id="loading">
    <div class="loader fade-in"></div>
    <div class="overay"></div>
</div>


<script type="text/javascript">
function loadingImg(action){
	if(action == 'show'){$("#loading").show();}
	if(action == 'hide'){$("#loading").hide();}
}
</script>

 

See the Pen ZEEmYxM by wonmi (@ellen_b) on CodePen.

 

ajax 통신할 때 효과를 주려는 경우

https://ellen92.tistory.com/40