본문으로 건너뛰기
KO

아이콘 21개 · interaction="loop"

루프 애니메이션 아이콘

화면에 보이는 동안 계속 재생되는 아이콘입니다. 로딩 중, 경고가 활성화된 상태, 입력을 기다리는 터미널처럼 지속되는 상태에 어울립니다. 동작 줄이기가 설정되어 있으면 첫 프레임에서 멈추며, 평범한 아이콘으로 읽힙니다.

루프 아이콘 전체

동작 방식

계속 재생됩니다. 동작 줄이기가 설정되어 있으면 정지된 첫 프레임에 머뭅니다.

동작 줄이기가 설정되어 있으면 아이콘이 자동 재생되지 않고 정지된 첫 프레임에 머뭅니다. 이 모든 처리는 React 컴포넌트가 맡으니, 아이콘만 고르면 됩니다.

이런 곳에 쓰세요

  • 로딩 스피너와 진행 표시
  • 활성화된 경고·오류 상태
  • 라이브·녹화 중 표시
  • 히어로 섹션의 아래로 스크롤 안내
  • 새 알림을 알리는 주목 표시

카테고리별

  • 경고 · 4

    Alert circle, Alert octagon, Alert triangle, Error

  • 알림 · 2

    Notification V3, Notification V4

  • 내비게이션 · 2

    More Horizontal, More Vertical

  • 액션 · 2

    Checkmark, Help

  • 미디어 · 1

    Airplay

  • 개발 · 1

    Terminal

  • 로딩 · 5

    Infinity, Loading circular, Loading V2, Loading V3, Loading V4

  • 기타 · 4

    Activity, Arrow down, Arrow up, Scroll down

React에서 사용하기

여기에 있는 아이콘은 기본적으로 이 인터랙션으로 재생됩니다. 다른 아이콘도 interaction prop을 전달하면 같은 인터랙션을 쓸 수 있습니다.

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings의 기본 인터랙션은 'hover'
<UseAnimations animation={settings} interaction="loop" size={32} />

루프 아이콘은 자동 재생되며, 스크롤해서 화면 밖으로 나가면 일시정지합니다. speed로 속도를 늦추거나, loop={false}로 한 번만 재생하거나, autoplay={false}로 정지 상태로 둘 수 있습니다.

import infinity from 'react-useanimations/lib/infinity';

<UseAnimations animation={infinity} speed={0.5} />      // 절반 속도
<UseAnimations animation={infinity} loop={false} />     // 한 번 재생하고 멈춤
<UseAnimations animation={infinity} autoplay={false} /> // 정지된 첫 프레임

모든 props는 문서에 정리되어 있습니다. React 밖에서는 아이콘이 Lottie JSON 파일이며, lottie-web으로 인터랙션을 재현하는 방법은 Lottie 아이콘 페이지에서 볼 수 있습니다.

자주 묻는 질문

루프 인터랙션을 쓰는 아이콘은 무엇인가요?

아이콘 21개: Alert circle, Alert octagon, Alert triangle, Error, Notification V3, Notification V4, More Horizontal, More Vertical, Checkmark, Help, Airplay, Terminal, Infinity, Loading circular, Loading V2 외 6개. 루프 아이콘은 주로 로딩 스피너, 활성 경고, 울리는 벨, 아래로 스크롤 안내에 쓰입니다.

사용자가 동작 줄이기를 설정했다면 어떻게 되나요?

동작 줄이기가 설정되어 있으면 아이콘이 자동 재생되지 않고 정지된 첫 프레임에 머뭅니다. React 컴포넌트가 prefers-reduced-motion을 읽고 설정이 바뀌면 바로 반영하므로, 따로 코드를 작성할 필요가 없습니다.

아이콘의 인터랙션은 어떻게 바꾸나요?

모든 아이콘은 디자인된 인터랙션으로 재생됩니다. 다른 아이콘에 이 동작을 적용하려면 interaction prop에 "loop" 값을 전달하고, 다른 동작으로 바꾸려면 다른 값('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay')을 전달하세요. 재생 방식은 autoplay, loop, speed props로 조정합니다.