어떻게 만들는가: CSS 로드러

CSS로 프리로드어를 만들어 보세요.

직접 시도해 보세요

로드러를 어떻게 만드는가

첫 번째 단계 - 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;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

직접 시도해 보세요

예시 설명:

border 속성을 통해 로드러의 테두리 크기와 색상을 지정합니다.border-radius 속성을 통해 로드러를 원형으로 변환합니다.

캘리지 내부에서 회전하는 파란 부분은 border-top 속성을 지정합니다. 더 많은 '회전기'를 추가하고 싶다면, border-bottom、border-left 및/또는 border-right（아래 예시를 참조하세요）。

로드러의 크기는 width 및 height 속성을 지정했습니다.

마지막으로, 파란 부분이 2초 동안 영원히 회전하는 애니메이션을 추가했습니다.

참고:지원하지 않는 animation 및 transform 브라우저에 포함해야 합니다. -webkit- 프롬프트를 클릭하여 작업 방법을 확인하세요.

추가로 회전기 추가

예제

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

직접 시도해 보세요

예제

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

직접 시도해 보세요

예제

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

직접 시도해 보세요

또 다른 예제

로드 어댑터를 페이지 중앙에 배치하고 로드가 완료되면 "페이지 내용"을 표시하는 방법:

예제

직접 시도해 보세요