[javascript] 자바스크립트 로딩 버튼 만들기

참고: https://dev.to/dcodeyt/create-a-button-with-a-loading-spinner-in-html-css-1c0h

이 포스트에서는 HTML과 CSS를 사용하여 클릭했을 때 로딩 이미지가 나타나는 버튼을 만들어보겠습니다.

소스코드 & 미리보기

전체 소스코드를 미리 보려면 다음 codepen에서 확인할 수 있습니다.

See the Pen loading button by shinyks (@shinyks) on CodePen.

HTML

버튼에 대한 HTML 작성부터 시작하겠습니다. 이는 매우 간단합니다. 먼저 클래스가 button인 <button> 요소를 만들고 그 안에 넣을 텍스트로 <span>을 사용합니다.

<button type="button" class="button">
    <span class="button__text">Save Changes</span>
</button>

이게 HTML의 전부입니다. 이제 다음의 CSS로 넘어가겠습니다.

CSS

이 곳에 대부분의 코드가 배치됩니다.

버튼에 스타일 주기

먼저 .button 및 .button-text 클래스의 스타일을 지정해 보겠습니다.

.button {
    position: relative;
    padding: 8px 16px;
    background: #009579;
    border: none;
    outline: none;
    border-radius: 2px;
    cursor: pointer;
}

.button:active {
    background: #007a63;
}

.button__text {
    font: bold 20px 'Quicksand', san-serif;
    color: #ffffff;
    transition: all 0.2s;
}

알고있겠지만 위의 많은 속성은 보여지는 모양을 위한 것 입니다. 하지만 여기서 주목할 부분은 position: relative 입니다. position: relative를 사용하면 로딩 이미지를 중앙에 배치할 수 있습니다.

로딩 스피너 만들기

회전하는 애니메이션을 만들기 위해 ::after 수도(pseudo)요소를 사용할 것 입니다. 수도요소는 CSS에서 스타일을 지정할 수 있는 HTML과 같은 요소입니다. 이 예제의 경우 ::after는 .button 안에 페이크요소를 만듭니다.

중요
.button-loading 이라는 클래스에 CSS를 적용할 것 입니다. 기본적으로 이는 회전하는 애니메이션을 표시하고 싶을 때 마다 JavaScript를 통해 동적으로 추가할 수 있는 .button의 클래스입니다. 예를 들면 이러한 작업을 form을 제출할 때 사용할 수 있습니다.

.button--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

몇 가지 속성을 살펴보겠습니다:

• content: "" - 이는 스피너를 화면에 보이기 위해 필요합니다.
• position: absolute - 부모의 position: relative와 조합하여 top, right, bottom, left 속성이 스피너를 중앙에 위치하게 합니다.
• border: 4px solid transparent - 이 속성으로 4px인 투명한 실선 테두리를 설정합니다. border-top-color와 조합하여 16x16 정사각형의 상단에만 테두리를 표시합니다. 이는 원형 스피너를 만드는 핵심입니다.
• border-radius: 50% - 이 속성으로 원을 만듭니다.

이 속성 중 일부를 켜거나 꺼 보면서 원을 생성하는 방법을 완전히 이해하는게 좋습니다.

여기서 button-loading-spinner 1s ease infinite로 애니메이션을 지정하고 있습니다. 즉, 스피너가 표시되는 동안 ease 타이밍과 1초의 애니메이션이 무한으로 반복됩니다.

button-loading-spinner 애니메이션을 아직 만들지 않았습니다. 이제 알아보겠습니다.

애니메이션

위의 코드에 지정된 애니메이션이 작동하게 하려면 keyframes를 만들어야 합니다.

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

여기서는 애니메이션이 1/4 짜리 원형 스피너를 완전히 회전시켜야 합니다. 이 코드를 사용하면 애니메이션이 속성이 작동합니다.

버튼이 작동하게 하기

이제 모든 CSS를 작성했으므로 JavaScript를 사용하여 스피너를 표시해야합니다. 대부분의 경우 버튼을 클릭하자마자 스피너를 활성화 하는 것이 좋습니다.

이를 위해 간단히 .button--loading 클래스를 추가합니다:

const theButton = document.querySelector(".button");

theButton.addEventListener("click", () => {
    theButton.classList.add("button--loading");
});

모든 프로젝트는 다를 것 이기 때문에 로딩 스피너를 전환하는 시점을 결정하는 것은 개발자의 몫입니다. 스피너를 제거하려면 classList.remove("button--loading");을 사용할 수 있습니다.

관련 글

CSS animation 속성

CSS transition 타이밍 함수