안녕하세요 반갑습니다. 오늘 우리는 그라디언트 로딩 애니메이션을 만드는 방법에 대한 빠른 CSS 튜토리얼을 볼 것입니다.

애니메이션 로드 중

어떻게 로딩 애니메이션을 만드는지 궁금하시죠? 아주 쉽게 만들 수 있는 방법을 알아보겠습니다.

비디오 튜토리얼

시작하자

따라서 기본 HTML 구조부터 시작하십시오. 그런 다음 로더를 포함할 클래스<div>를 사용하여 loading-box를 만듭니다. 그리고 그 안에 클래스<div>를 사용하여 다른loader을 만듭니다.

<div class="loading-box">
    <div class="loader"></div>
</div>

그리고 스타일링을 위해서는 먼저 기본 스타일을 줍니다.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fefefe;
}

.loading-box{
    position: relative;
    width: 400px;
    height: 50px;
    border-radius: 50px;
    border: 2px solid #ededed;
    overflow: hidden;
}

위의 CSS에서 플렉스 상자를 사용하여 로딩 상자를 중앙에 배치합니다.


산출



이제 스타일 로더입니다.

.loader{
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50px;
    background: linear-gradient(45deg, #b6b5ff, #ff9797);
    left: 0%;
}

산출



로더 작업이 완료되었음을 알 수 있습니다. 이제 애니메이션을 적용해 보겠습니다. 알 수 있듯이 left 속성을 0%로 설정하고 -100%로 변경하고 애니메이션을 제공합니다.

.loader{
    left: -100%;
    animation: load 3s linear infinite;
}

@keyframes load{
    0%{
        left: -100%;
    }
    100%{
        left: 100%;
    }
}

산출



완료되었습니다. 나는 당신이 하나 하나 모든 것을 이해하기를 바랍니다. 의심스럽거나 제가 놓친 부분이 있으면 댓글로 알려주세요.

유용한 기사

마음에 드시면 제 유튜브 채널을 구독하실 수 있습니다. 멋진 웹 콘텐츠를 제작합니다.

읽어 주셔서 감사합니다.