auto: 2026-08-01 08:55 (EOMSANGDON-HOME)

ui_template/ui_template_progress.css

@@ -0,0 +1,78 @@
+/* 공통 프로그레스 서클 — 뷰포트 위에 얹는 원형 진행 표시. */
+.ui-progress-circle {
+  --ui-progress-size: 96px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-8);
+  pointer-events: none;
+  user-select: none;
+}
+
+.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: color-mix(in srgb, var(--color-border) 70%, transparent);
+  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;
+}