단순 로더 — 단계별 가이드

HTML

HTML의 경우 "로더"클래스가 있는 div 요소가 하나만 있습니다.

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

CSS

너비와 높이를 원하는 대로 설정하고 테두리 반경을 50%로 한 다음 10px의 실선 테두리를 추가합니다. border-color 속성을 사용하여 위쪽 및 아래쪽 색상을 #000(검정)으로 설정하고 왼쪽과 오른쪽 투명하게.

.loader {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 10px solid #000;
    border-color: #000 transparent;
}

이제 "rotation"이라는 애니메이션을 만들겠습니다. 변환 속성을 0%에서 0도 회전하고 100%에서 360도 회전하도록 설정하기만 하면 됩니다.

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

이제 로더 요소에 애니메이션 속성을 추가하기만 하면 됩니다. 지속 시간을 1초, 무한 및 선형으로 설정하겠습니다.

.loader {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 10px solid #000;
    border-color: #000 transparent #000 transparent;
    animation: rotation 1s linear infinite; <!--  Animation  -->
}

비디오 자습서

비디오 자습서here에서 전체 코드를 찾을 수 있습니다.

이 기사를 읽어 주셔서 감사합니다. ❤️