확인할 수 있는 페이지 : 추천 코스 페이지

1. HTML

    <div class="loading">
        <div class="loading_element loading--first">
            <div class="circle circle--red"></div>
        </div>
        <div class="loading_element loading--second">
            <div class="circle circle--blue"></div>
        </div>
        <div class="loading_element loading--third">
            <div class="circle circle--green"></div>
        </div>
        <div class="loading_element loading--fourth">
            <div class="circle circle--yellow"></div>
        </div>        
    </div>

기존에는 svg로 만드려고 했지만 회전하는 애니메이션이 예상과는 다르게 동작하여 div 태그로 구현했다.

2. CSS

레이아웃을 담당하는 CSS, 요소를 담당하는 CSS, Modifier를 담당하는 CSS로 나눠서 작성하였다.

2-1. 레이아웃 담당 CSS

.loading{
    display:flex;
    justify-content: center;
    align-items: center;
    position:fixed;
    width:100%;
    height:100vh;
    background-color: rgba(0,0,0,0.7)
}

로딩화면을 뷰포트에 꽉차게 하기 위해 너비는 상위 요소 (body 태그)에 100%, 높이는 100vh를 적용했다.

2-2. 요소 담당 CSS

.loading_element{
    display: flex;
    justify-content: center;
    align-items: end;
    text-align: center;
    position:absolute;
    width:65px;
    height:65px;
    background-color: none;
    border-radius: 100%;
}

.circle{
    display: inline-block;
    width:16px;
    height:16px;
    border-radius: 100%;
}

2-3. Modifier CSS

.loading--first{
    animation: spin 2.5s infinite linear;
    animation-delay: 0.20s;
}

.loading--second{
    animation: spin 2.5s infinite linear;
    animation-delay: 0.4s;
}

.loading--third{
    animation: spin 2.5s infinite linear;
    animation-delay: 0.6s;
}

.loading--fourth{
    animation: spin 2.5s infinite linear;
    animation-delay: 0.8s;
}

애니메이션 효과를 지정하기 위한 CSS 선택자이다. 각 요소별로 animation-delay를 다르게 주어 순차적으로 돌게한다.

.circle--red{
    background-color: rgb(137, 168, 79);
}

.circle--blue{
    background-color: rgb(123, 175, 212);
}

.circle--green{
    background-color: rgb(220, 68, 5);
}

.circle--yellow{
    background-color: rgb(166, 3, 17);
}

각 동그라미들의 색상을 지정하기 위해 설정했다.

2-4. 애니메이션

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

@keyframse 선언을 통해 각 구간 별로 요소가 어디게 위치해야 하는지 지정해준다.

한 바퀴 돈 다음에 잠깐 기다렸다가 다시 돌게 하도록 40%에서 360도를 준다.

3. CSS 애니메이션

• animation-name

적용하는 애니메이션의 이름을 지정하여 해당 태그에 @keyframes로 지정한 애니메이션을 적용한다.

• animation-duration

애니메이션이 한 번 도는데 걸리는 시간

• animation-delay

요소가 로드된 후 얼마만큼 지난 후에 애니메이션이 시작될 지 정한다.

• animation-iteration-count

애니메이션이 몇 번 반복될 지 지정한다. infinite로 설정할 시 무한으로 반복된다.

3-1. @keyframes

각 프레임 별로 적용할 CSS 스타일을 지정할 수 있다.

@keyframes animationName {
    from {
        css-styles;
    }
    to {
        css-styles;
    }
}

0 - 100%를 지정할 때는 from/to를 사용할 수 있고 세밀하게 지정할 경우 명시적으로 특정 %를 줄 수 있다.

@keyframes move {
    0% {
        top: 0px;
    }
    25%{
        top: 20px;
    }
    75%{
        top: 175px;
    }
    100%{
        top: 200px;
    }
}