eomsangdon
13c2522f47
- 공통 서클 양식을 로딩 스피너(.ui-spinner) 기준으로 통일하고 overlay 옵션 신설 (컨테이너 정중앙 배치를 페이지별 CSS 없이 처리) - B05 3D: 위쪽 18% → 뷰포트 정중앙 (하단 패널에 가려져도 무방) - B04 포인트클라우드 뷰어: setLoading() 신설, render() 시 자동 해제 - B04 지형 뷰어: GLTF/PLY 로더 진행 이벤트로 실제 바이트 진행률 표시 - B04 2D 지도: 도엽 레이어 n/10 진행률 - B05 종단면 그래프: body-wrap으로 감싸 서클 유지, 자료 조회 전후로 토글 - B05 배수유역도: 배경도 → 도엽 레이어 → 세부유역 산정 단계 진행률
89 lines
2.2 KiB
CSS
89 lines
2.2 KiB
CSS
/* 공통 프로그레스 서클 — 뷰포트 위에 얹는 원형 진행 표시.
|
|
테두리 두께·색은 공통 로딩 스피너(.ui-spinner)와 같게 맞추고, 가운데에 진행률만 더한다. */
|
|
.ui-progress-circle {
|
|
--ui-progress-size: 72px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* 컨테이너 정중앙 오버레이 — 3D 뷰포트·지도·그래프 어디에나 같은 방식으로 얹는다.
|
|
컨테이너에 position: relative 가 있어야 한다. */
|
|
.ui-progress-circle--overlay {
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ui-progress-circle__dial {
|
|
position: relative;
|
|
width: var(--ui-progress-size);
|
|
height: var(--ui-progress-size);
|
|
}
|
|
|
|
.ui-progress-circle__svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
/* 12시 방향에서 시계 방향으로 채운다. */
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.ui-progress-circle__track {
|
|
fill: none;
|
|
stroke: var(--color-mist-violet);
|
|
stroke-width: 8;
|
|
}
|
|
|
|
.ui-progress-circle__bar {
|
|
fill: none;
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 8;
|
|
stroke-linecap: round;
|
|
transition: stroke-dashoffset var(--transition-base);
|
|
}
|
|
|
|
/* 진행률을 모르는 구간 — 호 하나를 계속 돌린다. */
|
|
.ui-progress-circle.is-indeterminate .ui-progress-circle__svg {
|
|
animation: ui-progress-spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes ui-progress-spin {
|
|
from {
|
|
transform: rotate(-90deg);
|
|
}
|
|
to {
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
|
|
.ui-progress-circle__percent {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-text-body);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.ui-progress-circle__label {
|
|
max-width: 22ch;
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
border-radius: var(--radius-inputs);
|
|
background: color-mix(in srgb, var(--color-surface-raised) 82%, transparent);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
text-align: center;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.ui-progress-circle__label:empty {
|
|
display: none;
|
|
}
|