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 더 원하는 경우 "spinners" (see example below) .
로더의 크기는 지정 될 width 와 height 속성.
마지막으로, 우리는 추가 animation 이초 애니메이션 속도로 영원히 푸른 것은 스핀을합니다.
참고 : 애니메이션을 지원하고 속성을 변환하지 않는 브라우저에 대한 -webkit- 및 -ms- 접두사를 포함해야한다. 방법을 확인하기 위해 예를 클릭합니다.
더 스피너 추가
예
.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;
} »그것을 자신을 시도 또 다른 예
페이지 및 쇼의 중간에 로더를 배치하는 방법의 예 "page content" 로드가 완료 :