[CSS] 회전하는 로딩 애니메이션 만드는 방법 코드 설명.

CSS를 이용하여 회전하는 로딩 애니메이션 만드는 방법에 대해 설명하려고 합니다.

설명 방법은 먼저 아래의 완성된 결과물을 보고 처음부터 코드 만드는 순서에 대해 설명하겠습니다.

 

완성된 결과물

 

See the Pen 회전하는 로딩 애니메이션 만들기 by solutiona80 (@solutiona80) on CodePen.

 

 

 

1. 로딩 영역의 동그라미 만들기

<div>
    <div class="count_motion"></div>
</div>

 

body{
  margin:0;
  padding:0;
}
.count_motion{
    height: 178px;
    position: relative;
    width: 178px;
    border-radius: 100%;
    border: 10px solid transparent;
    border-color: #00baff #fff #fff #fff;
    transform-origin: 50% 50%;
    background-color: #313e51;
}

 

 

 

 

먼저 div를 만들고 count_motion클래스로 영역을 설정해줍니다.

height: 178px; //높이 178px
width: 178px; //너비 178px
position: relative; //위치는 부모의 위치를 기준으로 정렬
border-radius: 100%; //동그라미 형태로 둥글게

border: 10px solid transparent;

/*

border는 테두리 설정하는 css로 속성 값으로 border-width, border-style, border-color를 가진다.

border-width는 두께

border-style는 테두리 형태(solid, dotted, groove, double, inset, outset, dashed, ridge 등이 있음)

border-color는 테두리 색

*/

예제에서 사용된 border: 10px solid transparent;의 테두리 설정값은 두께 10px에 slid 선 transparent는 투명하게입니다.

 

/*

다시 border-color 재 설정

border-color: 위, 오른쪽, 아래, 왼쪽 순서.

*/

border-color: #00baff #fff #fff #fff; //위쪽 테두리만 약간 파란색이며 오른쪽, 아래쪽, 왼쪽은 흰색.

transform-origin: 50% 50%;

/*

transform-origin은 회전 중심점 좌표를 설정함.

transform-origin: 50% 50%; 회전 중심점을 가운데로 설정함.
*/

background-color: #313e51;

/*

배경색을 #313e51으로 지정

*/

 

실행하면 아래처럼 동그라미가 그려집니다.

 

 

2. animation 효과 만들기

현재는 원형만 만든 상태로 설정한 중심점을 기준으로 회전하기 위해 회전하는 애니메이션을 만듭니다.

@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

 

 

 

 

코드를 보시면 내용이 4개가 같습니다. 차이는 각 브라우저에서 돌아가게 하기 위해 따로 브라우저에 맞는 키프레임을 설정한 것입니다.

 

@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

 

애니메이션 이름은 rotate-loading이며 코드 블럭 안에

0% 라는 말은 처음 시작할 때 transform을 이용한 rotate(0deg)로 오브젝트 각도는 0도로 설정하고

100%라는 말은 끝날 때 transform을 이용한 rotate(360deg)로 오브젝트 각도가 360도가 된다는 의미입니다.

 

애니메이션이 시작 시 정해진 시간 동안 각도를 0도에서 360도까지 변하게 됩니다. (아래에서 추가 설명)

 

 

3. object에 animation 효과 연결하기

.count_motion.on{
    -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading 1.5s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
    
    animation: rotate-loading 1.5s linear 0s infinite normal;
}

count_motion class에 on을 추가하여 회전 애니메이션 연결

-webkit-animation: rotate-loading 1.5s linear 0s infinite normal;

-webkit-transform-origin: 50% 50%;

/*

애니메이션 속성 :

animation : 애니메이션 이름, 애니메이션 재생시간, 애니메이션 진행 속도 또는 가속 방식, 애니메이션 지연시간, 애니메이션 반복 횟수, 애니메이션 방향

 

rotate-loading -> 애니메이션 이름으로 위에서 키프레임 만든 애니메이션을 가리킴

1.5s -> 1.5초 동안 한번 재생으로 rotate-loading에서 설정한 0% ~ 100%를 1.5초 동안 재생.

linear -> 애니메이션 가속 방식으로 증가폭이 일정한 방식

0s -> 딜레이 없이 바로 실행

infinite -> 애니메이션 반복 횟수로 숫자를 넣어서 원하는 만큼 반복 가능하며 infinite는 무한 반복을 뜻함.

normal -> 애니메이션 재생 방향으로 normal 정방향, reverse 역방향, alternate 정방향과 역방향으로 한 번씩 번갈아 재생, alternate-reverse 역방향과 정방향으로 한 번씩 번갈아 재행

*/

 

 

 

 

4. GO 텍스트 넣기

<div class="count">
    <div class="count_motion on"></div>
    <div class="count_txt">Go</div> <!--추가-->
</div>

 

텍스트를 넣을 div 추가

 

.count_txt {
    color: #ffffff;
    font-size: 48px;
    font-weight: bold;
    margin-top: 71px;
    margin-left: 16px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: 147px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    top:-15px
}

color: #ffffff; //폰트 흰색
font-size: 48px; //폰트 사이즈
font-weight: bold; //폰트 볼드체
margin-top: 71px; // 높이에 맞게 조정
margin-left: 16px;
position: absolute;
text-align: center;
text-transform: uppercase; // 모든 글자를 대문자로 변경, lowercase는 모든 글자를 소문자로 변경
width: 147px;
padding: 10px;
display: flex; //flex를 사용하는 이유가 텍스트 정렬을 높이, 너비에 맞추기 위해서입니다.
justify-content: center; //가로 기준 가운데로 정렬
align-items: center; //세로 기준 가운데로 정렬
top:-15px

 

 

맺음

css로 로딩 만드는 거 생각보다 어렵지 않습니다. 응용하면 로딩 대신 카운트를 할 수도 있고 클릭 이벤트를 넣어 시작화면으로도 넣을 수 있습니다. 문의 사항은 댓글로 남겨주세요.

 

 

 

"포스팅이 도움이 되셨다면 좋아요와 댓글 그리고 커피 한잔의 여유~ 감사합니다."