펄스 로더 - 단계별 가이드

아름다운 펄스 로더를 만드는 방법에 대한 자습서 - CSS 및 HTML 전용.

HTML

HTML의 경우 4개의 div가 있는 컨테이너가 필요합니다. 컨테이너에 "로더"클래스를 추가합니다.

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

CSS

CSS의 경우 먼저 "loader"요소의 스타일을 지정합니다.
위치를 상대적으로, 너비와 높이를 10 rem으로 설정합니다.

.loader {
    position: relative;
    width: 10rem;
    height: 10rem;
}

이제 "loader"요소 내부의 div 스타일을 지정할 것입니다.
위치를 절대값으로 설정하고 테두리를 50% 반경의 10px 단색 연두색으로 설정합니다.
이러한 요소는 움직이는 선을 나타냅니다. 4개가 있습니다.

.loader div {
    position: absolute;
    border: 10px solid rgb(151, 197, 12);
    border-radius: 50%;
    animation: load 2s ease-out infinite;
}

이제 우리는 4개의 라인에 대한 "로드"애니메이션을 만들 것입니다.
위쪽, 왼쪽, 너비 및 높이 속성을 변경하여 확장 효과를 만듭니다.
그리고 opacity 속성을 5%에서 1로, 100%에서 0으로 다시 추가하여 멋지게 사라지는 효과를 만들 것입니다.

@keyframes load {
    0% {
        top: 4rem;
        left: 4rem;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 4rem;
        left: 4rem;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 4rem;
        left: 4rem;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 8rem;
        height: 8rem;
        opacity: 0;
    }
}

이제 모든 div 요소에 애니메이션을 추가하기만 하면 됩니다.
2초 지속 시간, 무한, 완화로 설정합니다.

.loader div {
    position: absolute;
    border: 10px solid rgb(151, 197, 12);
    border-radius: 50%;
    animation: load 2s ease-out infinite; /* Added animation */
}

4개의 라인이 있으므로 각 요소에 다른 시간에 애니메이션 시작을 설정해야 합니다.
첫 번째 요소의 경우 애니메이션은 0에서 시작하므로 아무 것도 변경하지 않습니다.
이제 n번째 자식 선택자를 사용하고 숫자 "2"를 전달하여 두 번째 요소를 선택합니다. 지연을 -0.5초로 설정합니다.
세 번째 요소의 경우 애니메이션 지연을 -1초로 설정합니다.
그리고 마지막 요소에 대해 지연을 -1.5초로 설정합니다.

.loader div:nth-child(2) {
    animation-delay: -0.5s;
}
.loader div:nth-child(3) {
    animation-delay: -1s;
}
.loader div:nth-child(4) {
    animation-delay: -1.5s;
}

그리고 그게 다야. 간단하죠?

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

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