File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-18
08-14
08-19
08-18
08-18
08-18
08-18
08-18
File name
Commit message
Commit date
"use client";
import { cx } from "../../utils";
export interface FoxSpinnerProps {
/**
* 지름. CSS 길이면 무엇이든 되고, 굵기와 끝점도 함께 비율로 줄어든다.
* 넘기지 않으면 시안 크기(80px)다. 이미 크기가 정해진 자리에 넣을 때는 `"100%"`를 준다.
*/
size?: string | number;
/**
* 스크린리더가 읽을 말. 빈 문자열을 주면 잠재운다 — 옆 글자가 이미 "불러오는 중"이라고
* 말하고 있을 때 쓴다.
*/
label?: string;
/** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
hidden?: boolean;
/** 배치 조정용. */
className?: string;
}
/**
* @fox 로딩 표시. 한 바퀴 도는 고리와 그 앞머리의 동그라미로 이뤄진다.
*
* 색은 감싼 쪽의 `color`를 따른다 — 버튼 안에서는 글자색과 같아지고, 홀로 쓰면 테마
* 기본색이다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxSpinner({ size, label = "불러오는 중", hidden = false, className }: FoxSpinnerProps) {
if (hidden) {
return null;
}
return (
<span
className={cx("fox-spinner", className)}
style={size === undefined ? undefined : { inlineSize: size, blockSize: size }}
role={label ? "status" : undefined}
aria-label={label || undefined}
>
<span className="fox-spinner__arc" />
<span className="fox-spinner__head" />
</span>
);
}