CSS 로딩 애니메이션 예제 - 2~3

CSS 로딩 애니메이션 예제 - 2~3

이번에 만들 로딩 애니메이션 예제는 위와 같이 2가지다.
로딩 애니메이션이 너무 간단해서 2가지를 가지고 왔다.
정말 간단하다..

구현하기 - 1

html 부터 작성해보자
bounce는 배경을 위해 넣었다.

<div class="bounce">
    <div class="ball"></div>
</div>

대충 배경 css를 작성해 주고
원(?)을 을 만들어보자 원의 css도 간단하다 원은 border-radius 50%를 적용하면 된다.
그후 배경 중앙으로 옮겨 주었다.
커지는 애니메이션은 scale을 사용하면 로딩 애니메이션 구현이 끝난다 ㅋㅋ
keyframes 또한 간단하다.

.bounce {
    width: 50%;
    height: 300px;
    background: #141926;
    position: relative;
}
.ball {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff;
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: bounce 1s infinite;
}
@keyframes bounce {
    100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0;
    }
}

구현하기 - 2

두번째 애니메이션 html 작성을 해보자
rotate는 배경이고, circle이 로딩 애니메이션을 적용 시킬 요소다.

<div class="rotate">
    <div class="circle"></div>
</div>

css를 작성해보자.
rotate에 배경이될 css를 대충 작성해 준다.
circle에는 border로 기본이 되는 틀을 만들어 주고
border-top-color로 한부분의 색상을 바꿔주면 예제와 같은 형태가 나오게 된다.
keyframe으로 그냥 계속 돌려주면 로딩 애니메이션 끝이다.

.rotate {
    width: 50%;
    height: 300px;
    background-color: #137b85; 
    color: #fff; 
    text-align: center;
    position: relative;
}
.circle {
    width: 70px;
    height: 70px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: spin 1s infinite;
}
@keyframes spin {
    100% { 
        transform: translate(-50%, -50%) rotate(360deg); 
    }
}

- 끝 -