[ CSS ] 로딩 스피너 만들기

 

로딩 스피너

 

 

---

0. 참고

animation이란?

[ CSS ] 키 프레임과 애니메이션 속성

 

1. 로딩 스피너란 ?

• 페이지 전환을 할 때에 좀 더 자연스러운 연출을 위해 사용된다.
• 사용자의 불안감 해소,,?
• 한 번쯤 뱅글뱅글 돌아가는 걸 본 적있을텐데 그 뱅글뱅글이를 구현 예정.

 

2. 구현 목적

• CSS animation을 활용해보기
• 기본적인 스피너 만들어보기

 

3. 구현 시작

📌 CSS

• 전체 선택자 셋팅
  

  * {
    padding: 0;
    margin: 0;
  }​

• html, body 셋팅
  

  html, body {
    width: 100%;
    height: 100%;
  }​

• body 세부 셋팅
  

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1E1F26;
  }​

  • Flexible Box
    • 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델
    • 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해준다.
  • display: flex; 
    • flex의 의미처럼 유연성을 가진다.
    • 허용 범위 내에서 크기나 사이즈가 자동으로 조정되기도 한다.
  • justify-content: center;
    • 플렉스 요소의 수평 방향 정렬 방식을 설정한다.
    • 여기선 중앙 정렬
  • align-items: center;
    • 플렉스 요소의 수직 방향 정렬 방식을 설정한다.
    • 여기선 중앙 정렬
  • background-color: #1E1F26;
    • 배경색상 지정이다.
• spinner 셋팅하기
  

  #spinner {
    min-width: 40px;
    min-height: 40px;
    border: 5px solid rgba(255,255,255,.1);
    border-right: 5px solid orange;
    border-radius: 50%;
    animation: spinner 1s linear infinite;
  }​

   
• spinner animation 셋팅하기
  

  @keyframes spinner {
    from {
      transform: rotate(0deg);
    } to {
      transform: rotate(360deg);
    }
  }​

📌 HTML

<div id="spinner"></div>

 

 

 

---

 

CPDM