[CSS] SCSS를 활용한 동적 Spinner 애니메이션 만들기

 

Spinner는 주로 웹이나 애플리케이션에서 비동기 작업이나 데이터 로딩이 진행 중임을 사용자에게 시각적으로 알리기 위해 활용됩니다. Spinner의 UI를 제공함으로써 사용자 경험을 향상하고 사용자에게 어떤 일이 발생하고 있는지 명확히 전달하는 데 유용합니다.

SCSS를 활용하여 동적 Spinner 애니메이션 만들어봅시다.

 

HTML 구조 설정

<div class="wrap">
  <div class="spinBox">
    <svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
<path d="M17.5 10C17.5 11.0506 17.2931 12.0909 16.891 13.0615C16.489 14.0321 15.8997 14.914 15.1569 15.6569C14.414 16.3997 13.5321 16.989 12.5615 17.391C11.5909 17.7931 10.5506 18 9.5 18C8.44942 18 7.40914 17.7931 6.43853 17.391C5.46793 16.989 4.58601 16.3997 3.84314 15.6569C3.10028 14.914 2.511 14.0321 2.10896 13.0615C1.70693 12.0909 1.5 11.0506 1.5 10C1.5 8.94942 1.70693 7.90914 2.10896 6.93853C2.511 5.96793 3.10028 5.08601 3.84315 4.34314C4.58601 3.60028 5.46793 3.011 6.43853 2.60896C7.40914 2.20693 8.44942 2 9.5 2C10.5506 2 11.5909 2.20693 12.5615 2.60896C13.5321 3.011 14.414 3.60028 15.1569 4.34315C15.8997 5.08601 16.489 5.96793 16.891 6.93853C17.2931 7.90914 17.5 8.94943 17.5 10L17.5 10Z" stroke="#99A1A8" stroke-width="3"/>
<path d="M2.10889 6.93853C2.51092 5.96793 3.1002 5.08601 3.84307 4.34314C4.58594 3.60028 5.46785 3.011 6.43846 2.60896C7.40906 2.20693 8.44935 2 9.49992 2C10.5505 2 11.5908 2.20693 12.5614 2.60896C13.532 3.011 14.4139 3.60028 15.1568 4.34315C15.8996 5.08602 16.4889 5.96793 16.891 6.93853" stroke="white" stroke-width="3" stroke-linecap="round"/>
</svg>
  </div>
</div>

 

 

SCSS 기본적인 스타일

.wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  border: 1px solid red;
  .spinBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 80px;
    background-color: black;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

 

JSFiddle에서 미리보기 화면(preview)

 

 

 

클래스를 추가하면,  애니메이션이 동작할 수 있도록 HTML 구조 추가

<div class="wrap">
  <div class="spinBox loading"> <!-- 클래스명 loading이 추가 될 때, spinner 모션 발생 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
<path d="M17.5 10C17.5 11.0506 17.2931 12.0909 16.891 13.0615C16.489 14.0321 15.8997 14.914 15.1569 15.6569C14.414 16.3997 13.5321 16.989 12.5615 17.391C11.5909 17.7931 10.5506 18 9.5 18C8.44942 18 7.40914 17.7931 6.43853 17.391C5.46793 16.989 4.58601 16.3997 3.84314 15.6569C3.10028 14.914 2.511 14.0321 2.10896 13.0615C1.70693 12.0909 1.5 11.0506 1.5 10C1.5 8.94942 1.70693 7.90914 2.10896 6.93853C2.511 5.96793 3.10028 5.08601 3.84315 4.34314C4.58601 3.60028 5.46793 3.011 6.43853 2.60896C7.40914 2.20693 8.44942 2 9.5 2C10.5506 2 11.5909 2.20693 12.5615 2.60896C13.5321 3.011 14.414 3.60028 15.1569 4.34315C15.8997 5.08601 16.489 5.96793 16.891 6.93853C17.2931 7.90914 17.5 8.94943 17.5 10L17.5 10Z" stroke="#99A1A8" stroke-width="3"/>
<path d="M2.10889 6.93853C2.51092 5.96793 3.1002 5.08601 3.84307 4.34314C4.58594 3.60028 5.46785 3.011 6.43846 2.60896C7.40906 2.20693 8.44935 2 9.49992 2C10.5505 2 11.5908 2.20693 12.5614 2.60896C13.532 3.011 14.4139 3.60028 15.1568 4.34315C15.8996 5.08602 16.4889 5.96793 16.891 6.93853" stroke="white" stroke-width="3" stroke-linecap="round"/>
</svg>
  </div>
</div>

 

 

클래스를 추가하면,  애니메이션이 동작할 수 있도록 SCSS 스타일 추가

위에 주어진 SVG에 대한 간단한 Spinner 애니메이션을 생성하는 SCSS 코드입니다. 애니메이션은 SVG가 회전하면서 로딩하는 효과를 보여줍니다.
spin이라는 이름의 키프레임을 정의하고, 이를 이용하여 spinner 클래스가 적용된 요소에 대한 회전 애니메이션을 만듭니다.

animation 속성에서 2s는 애니메이션의 기간을 나타내며, linear는 애니메이션의 타이밍 함수를 나타냅니다. infinite는 애니메이션이 무한 반복됨을 나타냅니다. 애니메이션을 원하는 대로 조절하여 사용할 수 있습니다.

 

/* spin 애니메이션 키프레임 생성 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  border: 1px solid red;
  .spinBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 80px;
    background-color: black;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    
    &.loading { /* spinBox에 클래스명 loading이 추가 될 때, svg에 애니메이션 동작하도록 선언 */
      svg {
        animation: spin 2s linear infinite; /* 일정하게 무한루프로 설정 */
      }
    }
  }
}

 

 

이렇게 SCSS를 활용한 동적 Spinner 애니메이션 만들어 보았습니다.

 

 

 

 

 

 

Array APIs - find(), findIndex(), filter(), map(), some(), every(), reduce(), sort()

 

[git] README.md 파일 작성시, Markdown 문법(Syntax) 사용법

 

유용한 터미널 명령어

 

작업 생산성을 높여주는 확장 프로그램 : Prettier(프리티어) 설정법