CSS, 제이쿼리 이용한 페이지 로딩 효과

# 페이지 로딩 효과

## 결과물

See the Pen 페이지 로딩효과 by dlagusgh1 (@dlagusgh1) on CodePen.

 

## html

<div class="loader"></div>

## CSS

.loader {
	border: 16px solid #f3f3f3;
	border-top: 16px solid #3498db;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@keyframes spin {
	0% {transform:translate(-50%, -50%) rotate(0deg); }
	100% {transform:translate(-50%, -50%) rotate(360deg); }
}

## 제이쿼리

<script
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(window).load(function() {
          $('.loader').fadeOut();
      });
</script>

## 출처

https://www.youtube.com/watch?v=_ScD4ipBXC0