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-18
08-14
08-14
08-14
08-18
08-18
08-14
08-18
08-18
// FoxSpinner — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) img-loading (5384:9710)
//
// 마크업 계약 (React 밖 소비자용):
// <span class="fox-spinner" role="status" aria-label="불러오는 중">
// <span class="fox-spinner__arc"></span>
// <span class="fox-spinner__head"></span>
// </span>
//
// 시안은 80px 그림 한 장으로 왔지만 래스터를 그대로 쓰지 않는다 — 크기를 바꾸면 뭉개지고
// 색도 토큰을 못 쓴다. 픽셀을 재서 같은 도형을 CSS로 다시 그렸다.
// - 고리: 바깥 반지름 40 · 안쪽 28 → 굵기 12px (지름의 15%)
// - 색: 6시에서 시작해 시계방향으로 60°까지 진하고, 나머지 300°에 걸쳐 투명해진다
// - 앞머리: 지름 12px 원이 6시 자리 고리 중심선 위에 얹힌다 (고리 끝을 둥글게 맺는다)
// 원본 그림의 알파를 5°마다 재서 확인한 값이다(185~240° = 1.00, 이후 180°까지 선형 감소).
//
// 크기는 지름 하나로 정해진다. 굵기·앞머리를 퍼센트로 잡아 어떤 지름에서도 비율이 같다.
//
// 색은 기본이 테마 기본색이다(시안). 버튼처럼 글자색을 따라야 하는 자리는 감싼 쪽에서
// `color: inherit`으로 되돌린다 — 요소에 색을 직접 주는 편이 상속보다 강해서, 기본값을
// 두는 한 감싸기만으로는 바뀌지 않는다.
//
// 토큰이 아닌 값:
// - 지름 8rem, 굵기·앞머리 15%, 마스크 정지점 70%, 그라디언트 60°: 시안에서 잰 값이나
// Figma가 변수로 export하지 않는다(사용자 승인).
// - 한 바퀴 도는 시간 1초: 시안이 정지 그림이라 정보가 없다. 흔한 기본값을 쓴다.
// - transform / mask / animation: 구조·움직임 규칙.
@use "abstracts" as fox;
@keyframes fox-spinner-turn {
to {
transform: rotate(1turn);
}
}
.fox-spinner {
position: relative;
display: inline-block;
flex-shrink: 0;
// 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
inline-size: 8rem;
block-size: 8rem;
color: fox.color(element-theme-primary);
animation: fox-spinner-turn 1s linear infinite;
// 버튼 안에서는 계열별 글자색을 따라간다.
.fox-button__spinner > & {
color: inherit;
}
// 고리. 원뿔 그라디언트를 그린 뒤 가운데를 도려내 굵기를 만든다.
&__arc {
position: absolute;
inset: 0;
border-radius: fox.radius(max);
background: conic-gradient(
from 180deg,
currentColor 0deg,
currentColor 60deg,
transparent 360deg
);
// 안쪽 70%를 지운다 — 반지름의 30%가 곧 지름의 15%다.
mask: radial-gradient(farthest-side, transparent 70%, #000 70%);
}
// 고리 앞머리. 끝을 둥글게 맺어 준다.
&__head {
position: absolute;
inset-block-end: 0;
inset-inline-start: 50%;
inline-size: 15%;
block-size: 15%;
transform: translateX(-50%);
border-radius: fox.radius(max);
background: currentColor;
}
// 움직임을 줄이려는 사용자에게는 천천히 돈다 — 멈추면 무엇을 기다리는지 알 수 없다.
@media (prefers-reduced-motion: reduce) {
animation-duration: 3s;
}
}