useLoadingSpinner

@hua-labs/hua/motion

로딩 스피너 상태 및 애니메이션 관리

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useLoadingSpinner } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

const spinner = useLoadingSpinner({
  type: "rotate",
  size: 40,
  color: "#3b82f6",
  autoStart: true,
});

return (
  <div>
    {spinner.isLoading && (
      <div ref={spinner.ref} style={spinner.style} />
    )}
  </div>
);

docs:hooks.use-loading-spinner.examples.controlledLoadingState

tsx

const spinner = useLoadingSpinner({
  type: "dots",
  dotCount: 3,
  color: "currentColor",
  autoStart: false,
});

const handleFetch = async () => {
  spinner.startLoading();
  await fetchData();
  spinner.stopLoading();
};

return (
  <button onClick={handleFetch}>
    {spinner.isLoading ? (
      <div ref={spinner.ref} style={spinner.style} />
    ) : (
      "Load Data"
    )}
  </button>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
type	"rotate" \| "pulse" \| "bounce" \| "wave" \| "dots" \| "bars" \| "custom"	"rotate"	docs:hooks.use-loading-spinner.options.type
duration	number	1000	docs:hooks.use-loading-spinner.options.duration
color	string	"#3b82f6"	docs:hooks.use-loading-spinner.options.color
size	number	40	docs:hooks.use-loading-spinner.options.size
thickness	number	4	docs:hooks.use-loading-spinner.options.thickness
autoStart	boolean	true	docs:hooks.use-loading-spinner.options.autoStart
infinite	boolean	true	docs:hooks.use-loading-spinner.options.infinite
rotationSpeed	number	1	docs:hooks.use-loading-spinner.options.rotationSpeed
dotCount	number	3	docs:hooks.use-loading-spinner.options.dotCount
barCount	number	4	docs:hooks.use-loading-spinner.options.barCount

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-loading-spinner.returns.ref
style	CSSProperties	docs:hooks.use-loading-spinner.returns.style
isLoading	boolean	docs:hooks.use-loading-spinner.returns.isLoading
isAnimating	boolean	docs:hooks.use-loading-spinner.returns.isAnimating
spinnerType	string	docs:hooks.use-loading-spinner.returns.spinnerType
rotationAngle	number	docs:hooks.use-loading-spinner.returns.rotationAngle
progress	number	docs:hooks.use-loading-spinner.returns.progress
startLoading	() => void	docs:hooks.use-loading-spinner.returns.startLoading
stopLoading	() => void	docs:hooks.use-loading-spinner.returns.stopLoading
setLoadingState	(loading: boolean) => void	docs:hooks.use-loading-spinner.returns.setLoadingState
start	() => void	docs:hooks.use-loading-spinner.returns.start
stop	() => void	docs:hooks.use-loading-spinner.returns.stop
reset	() => void	docs:hooks.use-loading-spinner.returns.reset

사용 사례

로딩 상태

데이터 로딩 중 시각적 피드백

데이터 페칭

API 요청 중 로딩 인디케이터

폼 제출

폼 제출 중 버튼 상태 변경

페이지 전환

부드러운 페이지 간 전환 효과

useGradient useSkeleton