09커튼 열고 닫기
로딩이 끝나는 순간을 연출하는 마무리 항목으로, 좌우 커튼 두 장이 바깥으로 밀리며 뒤에 숨겨둔 콘텐츠 자리를 드러내고 잠시 뒤 다시 닫혀 반복됩니다.
쓰임로딩 끝 → 본문 전환 연출, 페이지 이동 커버
translateXoverflow: hidden$duration
<main class="stage">
<div class="ct-scene is-demo">
<div class="ct-content" aria-hidden="true">
<span class="ct-bar ct-bar-title"></span>
<span class="ct-bar"></span>
<span class="ct-bar"></span>
<span class="ct-thumb"></span>
</div>
<div class="ct-panel ct-left" aria-hidden="true"><span class="ct-label">로딩 중</span></div>
<div class="ct-panel ct-right" aria-hidden="true"></div>
</div>
</main>@use "../../../../site/static/demo-tokens" as *;
// ── 변수 3개 ──────────────────────────────────────────
$duration: 2s;
$easing: $ease-spring;
$color: $subject-lilac;
@include stage($stage-ink);
// 실사용: 로딩 중에만 .is-loading — 끝나면 클래스를 떼고 커튼을 연 채로 둔다
.ct-scene {
position: relative;
width: 252px;
height: 168px;
border-radius: $r-card;
overflow: hidden;
}
.ct-content {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1fr 64px;
grid-template-rows: auto auto auto 1fr;
gap: $sp-2 $sp-3;
padding: $sp-4;
}
.ct-bar {
height: 14px;
border-radius: $r-pill;
background: rgba(255, 247, 230, .4);
}
.ct-bar-title {
height: 20px;
grid-column: 1 / -1;
background: rgba(255, 247, 230, .75);
}
.ct-thumb {
grid-row: 2 / 4;
grid-column: 2;
border-radius: $r-sm;
background: rgba(255, 247, 230, .3);
}
.ct-panel {
position: absolute;
top: 0;
bottom: 0;
width: 50.5%; // 살짝 겹쳐 틈이 안 보이게
}
.ct-left { left: 0; background: $color; }
.ct-right { right: 0; background: $subject-pink; }
.ct-label {
position: absolute;
top: 50%;
left: 100%;
transform: translate(-50%, -50%);
padding: $sp-1 $sp-3;
border-radius: $r-pill;
background: rgba(23, 20, 26, .55);
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
font-size: 13px;
line-height: 1.5;
color: $subject-cream;
white-space: nowrap;
}
.is-loading .ct-left,
.is-demo .ct-left { animation: ct-open-left $duration $easing infinite; }
.is-loading .ct-right,
.is-demo .ct-right { animation: ct-open-right $duration $easing infinite; }
@keyframes ct-open-left {
0%, 12% { transform: translateX(0); }
38%, 72% { transform: translateX(-101%); }
94%, 100% { transform: translateX(0); }
}
@keyframes ct-open-right {
0%, 12% { transform: translateX(0); }
38%, 72% { transform: translateX(101%); }
94%, 100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.is-loading .ct-left,
.is-demo .ct-left {
animation: none !important;
transform: translateX(-101%) !important; // 열린 채로 멈춘다
}
.is-loading .ct-right,
.is-demo .ct-right {
animation: none !important;
transform: translateX(101%) !important;
}
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #17141a;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.ct-scene {
position: relative;
width: 252px;
height: 168px;
border-radius: 16px;
overflow: hidden;
}
.ct-content {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1fr 64px;
grid-template-rows: auto auto auto 1fr;
gap: 8px 12px;
padding: 16px;
}
.ct-bar {
height: 14px;
border-radius: 999px;
background: rgba(255, 247, 230, 0.4);
}
.ct-bar-title {
height: 20px;
grid-column: 1/-1;
background: rgba(255, 247, 230, 0.75);
}
.ct-thumb {
grid-row: 2/4;
grid-column: 2;
border-radius: 8px;
background: rgba(255, 247, 230, 0.3);
}
.ct-panel {
position: absolute;
top: 0;
bottom: 0;
width: 50.5%;
}
.ct-left {
left: 0;
background: #b9a0ff;
}
.ct-right {
right: 0;
background: #ff9ebb;
}
.ct-label {
position: absolute;
top: 50%;
left: 100%;
transform: translate(-50%, -50%);
padding: 4px 12px;
border-radius: 999px;
background: rgba(23, 20, 26, 0.55);
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
font-size: 13px;
line-height: 1.5;
color: #fff7e6;
white-space: nowrap;
}
.is-loading .ct-left,
.is-demo .ct-left {
animation: ct-open-left 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.is-loading .ct-right,
.is-demo .ct-right {
animation: ct-open-right 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes ct-open-left {
0%, 12% {
transform: translateX(0);
}
38%, 72% {
transform: translateX(-101%);
}
94%, 100% {
transform: translateX(0);
}
}
@keyframes ct-open-right {
0%, 12% {
transform: translateX(0);
}
38%, 72% {
transform: translateX(101%);
}
94%, 100% {
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.is-loading .ct-left,
.is-demo .ct-left {
animation: none !important;
transform: translateX(-101%) !important;
}
.is-loading .ct-right,
.is-demo .ct-right {
animation: none !important;
transform: translateX(101%) !important;
}
}import { CSSProperties } from "react";
import styles from "./CurtainReveal.module.scss";
type Vars = CSSProperties & {
"--duration"?: string;
"--easing"?: string;
"--color"?: string;
};
export interface CurtainRevealProps {
duration?: string;
easing?: string;
color?: string;
/** 반대쪽 커튼 색 */
altColor?: string;
/** 커튼 위 알약 문구 */
label?: string;
}
export default function CurtainReveal({
duration = "2s",
easing = "cubic-bezier(.2, .8, .2, 1)",
color = "#b9a0ff",
altColor = "#ff9ebb",
label = "Loading",
}: CurtainRevealProps) {
const style: Vars & { "--alt-color"?: string } = {
"--duration": duration,
"--easing": easing,
"--color": color,
"--alt-color": altColor,
};
return (
<div className={styles.scene} style={style}>
<div className={styles.content} aria-hidden="true">
<span className={`${styles.bar} ${styles.barTitle}`} />
<span className={styles.bar} />
<span className={styles.bar} />
<span className={styles.thumb} />
</div>
<div className={styles.left} aria-hidden="true">
<span className={styles.label}>{label}</span>
</div>
<div className={styles.right} aria-hidden="true" />
</div>
);
}09 커튼 열고 닫기 — 측정 누적면적 29.278% · 움직인 프레임 13/23GODRICH 원작 · zip 에 SCSS·React 포함 · 로딩페이지 디자인 9종 — 복붙하는 예쁜 CSS 로딩 화면
이 데모가 속한 글
로딩페이지 디자인 9종 — 복붙하는 예쁜 CSS 로딩 화면로딩페이지 디자인은 서비스가 켜지는 첫 순간에 사용자에게 "기다리고 있네"라고 말해주는 화면입니다. 기본 스피너 하나로도 되지만, 파스텔 링이나 차오르는 물처럼 예쁜 로딩 화면은 복붙 몇 줄로 사이트 인상을 바꿔 놓 이 글의 데모 전부 보기
