CSS로만 로딩 스피너 만들기

 

위 이미치처럼 뱅글 뱅글 로딩 이미지를 css로만으로도 만들 수 있음

 

검색하면 무지 많이 나옴

구글: https://www.google.com/search?q=css+only+spinner&rlz=1C1GCEA_enAU873AU873&oq=css+only+spinner&aqs=chrome.0.0l6j69i60.6351j0j7&sourceid=chrome&ie=UTF-8

 

아무튼, 복잡하게 만들면 매우 복잡해 질 수 있으나 기본 개념은 아래와 같다.

 

html이 아래와 같다고 했을때,

 

<div id="loading"><div class="spinner"></div></div>

 

CSS는 아래처럼 된다.

#loading {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
}

@keyframes spinner {
  from {transform: rotate(0deg); }
  to {transform: rotate(360deg);}
}
 
#loading .spinner {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  margin-left: -32px;
  border-radius: 50%;
  border: 8px solid transparent;
  border-top-color: #f19022;
  border-bottom-color: #f19022;
  animation: spinner .8s ease infinite;
}

사용법: 로딩이 필요할때 id 가 loading 인 div를 보이게 하고 로딩이 끝나면 감춤

 

설명: 박스를 하나 만들되 각 코너를 50%로 둥글리면 원이 되고 이 원을 animation 을 통해 360도 회전시킨다.

이때 특정 테두리에 색상을 먹이면 일부분이 채워진 듯이 표현됨

 

참고로 .spinner::after 같은걸 쓰면 html 에 <div class="spinner"></div> 가 아예 없어도 되게 만들수 있지만 (id 가 loading 인 div에 spinner 클래스를 추가해서 스피너를 보이게 하고 그 클래스를 제거하면 안보이는 방식) 문제는 IE 계열과 사파리 브라우저에서 애니메이션이 작동하지 않는다는 단점이 있음.

 

아래는 예시: (Result 탭을 눌러보자)

https://jsfiddle.net/alikong/3w62e71b/