Page Loading Animation Source (GIF)
header code
<style>
#loadDiv
{
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: flex;
background: white;
z-index: 999;
opacity: 0.9;
}
#loadDiv > img
{
display: flex;
width: 80%;
height: auto;
margin: auto;
}
</style>
body code
/* 아래 GIF URL */
<div id="loadDiv">
<img src="https://cdn.imweb.me/thumbnail/20220830/8a116ee851d80.gif">
</div>
footer code
/* FadeOut 속도 조절 ex) 300 => 300ms => 0.3초 */
<script type="text/javascript">
$(window).on('load', function() {
setTimeout(function(){
$("#loadDiv").fadeOut();
}, 300);
});
</script>
아래에 GIF 이미지