background circle animation loading

처음 접속시 중앙에 원형 배경과 로고 나타나기

-> 로딩완료 후 둥근 배경이 확 커지면서 화면을 꽉 채우고 사라지는것

 

See the Pen background circle animation loading by publisher.kim (@publisherkim) on CodePen.

 

 

 

html

<div class="loading">
  <div class="circle"></div>
  <img src="https://umings.github.io/images/logo_white.png" alt="">
 </div>

컨텐츠

 

css

body.hide{overflow: hidden;}

.loading{position: fixed; top: 0; left: 0; bottom: 0; width: 100%; height: 100%;background: #fff; z-index: 9999; overflow: hidden;}
.loading .circle{width: 300px; height: 300px; border-radius: 300px; background: #006fc0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.loading img{display: block; margin: 0 auto; position: fixed; top:58%; left:50%; transform:translate(-50%,-50%); opacity: 0; z-index: 999; width:200px; animation: loading2 0.7s; animation-fill-mode: forwards; animation-delay: 0.3s; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);}
.loading .circle.on{ animation: loading 0.3s; animation-fill-mode: forwards; animation-delay: 0.9s; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);}
@keyframes loading{
	0%{border-radius: 300px; width:300px; height:300px;}
	100%{width:120vw; height:120vw; border-radius: 9999px;}
}
@keyframes loading2{
	0%{top:58%; opacity:0;}
	100%{top:50%;  opacity:1;}
}

 

javascript  *jquery 필요

$(window).load(function() {
	$(".loading").addClass("on");
	$(".loading .circle").addClass("on");
	setTimeout(function(){
		$(".loading").fadeOut(200);
		$("body").removeClass("hide");
	},1700);
});