방법 - 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-top
속성으로 지정됩니다. border-bottom
, border-left
및/또는
border-right
더 많은 "스피너"를 원하는 경우 포함할 수도 있습니다 (아래 예 참조).
로더의 크기는 width
및 height
속성으로 지정됩니다.
마지막 animation
으로 2초 애니메이션 속도로 파란색 물체가 영원히 회전하도록 하는 기능을 추가합니다.
참고: 애니메이션 및 변환 속성을 지원하지 않는 브라우저의 경우 -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;
}
또 다른 예
페이지 중앙에 로더를 배치하고 로드가 완료되면 "페이지 콘텐츠"를 표시하는 방법의 예: