How To – CSS 로더

w3.css

CSS 로더

CSS로 프리로더를 만드는 방법을 알아보자.

로더를 만드는 방법

1단계) HTML 추가

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

2단계) CSS 추가

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

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

border 속성은 로더의 테두리 크기와 테두리 색상을 지정한다.
border-radius 속성은 로더를 원으로 변환한다.

테두리 안쪽에서 회전하는 파란색은 테두리 상단 속성으로 지정된다.
더 많은 “스피너”를 원한다면 border-bottom, border-left 및/또는 border-right을 포함할 수도 있다.

로더의 크기는 width 및 height 속성으로 지정한다.

마지막으로 2초 animation 속도로 파란색 물체가 영원히 회전하는 애니메이션을 추가한다.

⭐ 애니메이션 및 변형 속성을 지원하지 않는 브라우저의 경우 -webkit- 접두사를 포함해야 한다.

더 많은 스피너 추가

예제 1

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

예제 2

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

예제 3

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

또 다른 예

로딩이 완료되면 로더를 페이지 중앙에 배치하고 “페이지 콘텐츠”를 표시하는 방법의 예

1단계) HTML 추가

<div id="loader"></div>

<div style="display:none;" id="myDiv" class="animate-bottom">
  <h2>Tada!</h2>
  <p>Some text in my newly loaded page..</p>
</div>

2단계) CSS 추가

/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

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

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}

3단계) Javascript 추가

var myVar;

function myFunction() {
  myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
}