HTML 및 CSS에서 로딩 스피너로 버튼 만들기 🔥

오늘의 포스트에서는 HTML과 CSS를 사용하여 클릭했을 때 로딩 스피너가 있는 멋진 버튼을 만드는 방법을 보여드리겠습니다.

소스 코드 및 미리보기

전체 소스 코드를 자세히 보려면 ​​여기에서 찾을 수 있습니다.

비디오 튜토리얼

동영상 형식의 이 튜토리얼을 선호하는 경우 내 YouTube 채널인 dcode에서 시청할 수 있습니다.

또한 웹 개발에 관심이 있으시면 제 채널 구독을 고려하십시오 😁

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 의사 요소를 사용할 것입니다. 유사 요소는 CSS에서 스타일을 지정할 수 있는 요소(예: HTML)입니다. 이 경우 ::after는 .button 내부에 있는 "가짜 요소"를 생성합니다.

Important!
We're going to be applying CSS to a class called .button--loading. Basically, this is a modifier class on the .button which can be added dynamically through JavaScript whenever you want the spinning animation to appear. For example, this may be done at the time of submitting a 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 , left , right 및 bottom 속성을 사용하면 스피너

를 중앙에 배치할 수 있습니다.

border: 4px solid transparent - 이것으로 투명한 4px 넓은 실선 테두리를 설정합니다. border-top-color와 결합하면 16x16 사각형의 상단에만 테두리가 표시됩니다. 이것은 서클 스피너를 만드는 데 중요합니다.

border-radius: 50% - 이것은 원을 생성합니다

원을 생성하기 위해 작동하는 방식을 완전히 이해하려면 이러한 속성 중 일부를 켜고 끄는 것이 좋습니다.

눈치채셨겠지만 여기에서 animation 값을 button-loading-spinner 1s ease infinite 로 지정하고 있습니다. 이것은 스피너가 표시되는 한 ease 타이밍 지속 시간과 1초의 애니메이션 시간으로 무한히 회전한다는 것을 의미합니다.
button-loading-spinner 애니메이션은 아직 실제로 존재하지 않으므로 생성해야 합니다.

생기

위의 이전 코드 블록에 지정된 애니메이션을 작동시키려면 해당 애니메이션에 대한 키프레임을 만들어야 합니다. 이것은 간단합니다.

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

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

여기서 우리는 애니메이션이 1/4 원형 스피너를 회전하지 않는 상태에서 완전히 회전하는 상태로 돌려야 한다고 말하고 있습니다. 이 코드를 사용하면 위의 animation 속성이 이제 작동합니다.

버튼 작동시키기

이제 모든 CSS가 완료되었으므로 JavaScript를 사용하여 스피너를 표시해야 합니다. 일반적으로 버튼을 클릭하는 즉시 스피너를 활성화하고 싶을 것입니다.

이렇게 하려면 .button--loading 의 클래스를 추가하기만 하면 됩니다. 예를 들면 다음과 같습니다.

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

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

모든 응용 프로그램은 다를 것이므로 로딩 스피너를 언제 토글할지 결정하는 것은 사용자의 몫입니다. 제거하려면 classList.remove("button--loading"); 를 사용할 수 있습니다.

결론

이것이 HTML과 CSS를 사용하여 로딩 스피너가 있는 버튼을 만드는 방법입니다. 질문이나 의견이 있으시면 아래에 남겨주세요. 최선을 다해 답변해 드리겠습니다 🙂 건배!