08在庫バーバッジ
バッジ内の細いバーがtransform-origin: leftを基準にscaleXを1から0.25まで縮め、同時に背景色が緑→オレンジ→赤に補間されることで、長さと色の両方で在庫の減少を見せる。
使いどころ品切れ間近の商品の在庫警告、数量限定・先着購入の訴求
scaleX draintransform-origin: left배경색 다단 보간
<main class="stage is-demo">
<div class="badge" aria-label="3 left in stock">
<span class="label">3 LEFT</span>
<span class="track"><span class="fill"></span></span>
</div>
</main>@use "../../../../site/static/demo-tokens" as *;
// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-loop; // 2s — 재고바가 줄어드는 한 주기
$easing: $ease-out;
$color: #50a26e; // 재고 넉넉함(시작 색)
@include stage($stage-paper);
.badge {
width: 148px;
padding: $sp-3 $sp-4;
border-radius: $r-card;
background: $subject-ink;
box-shadow: $shadow-raised;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.label {
display: block;
margin-bottom: $sp-2;
color: #fff;
font-weight: 700;
font-size: 15px;
letter-spacing: .04em;
}
.track {
display: block;
width: 100%; height: $sp-2;
border-radius: $r-xs;
background: rgba(255, 255, 255, .15);
overflow: hidden;
}
.fill {
display: block;
width: 100%; height: 100%;
border-radius: $r-xs;
background: $color;
transform: scaleX(1);
transform-origin: left; // 규칙8: 재고게이지 left 기준
}
.stage.is-demo .fill {
animation: drain $duration $easing infinite;
}
@keyframes drain {
0%, 10% { transform: scaleX(1); background: $color; }
50% { transform: scaleX(.6); background: $stage-orange; }
90%, 100% { transform: scaleX(.25); background: $error; }
}
@media (prefers-reduced-motion: reduce) {
.stage.is-demo .fill { animation: none; transform: scaleX(.25); background: $error; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ffffff;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.badge {
width: 148px;
padding: 12px 16px;
border-radius: 16px;
background: #17141a;
box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.label {
display: block;
margin-bottom: 8px;
color: #fff;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.04em;
}
.track {
display: block;
width: 100%;
height: 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.15);
overflow: hidden;
}
.fill {
display: block;
width: 100%;
height: 100%;
border-radius: 4px;
background: #50a26e;
transform: scaleX(1);
transform-origin: left;
}
.stage.is-demo .fill {
animation: drain 2s ease-out infinite;
}
@keyframes drain {
0%, 10% {
transform: scaleX(1);
background: #50a26e;
}
50% {
transform: scaleX(0.6);
background: #ff4d1f;
}
90%, 100% {
transform: scaleX(0.25);
background: #c2361a;
}
}
@media (prefers-reduced-motion: reduce) {
.stage.is-demo .fill {
animation: none;
transform: scaleX(0.25);
background: #c2361a;
}
}import type { CSSProperties } from "react";
import styles from "./BadgeLimitedStock.module.scss";
export type BadgeLimitedStockProps = {
duration?: number;
easing?: string;
color?: string;
left?: number;
};
export default function BadgeLimitedStock({
duration = 2000,
easing = "ease-out",
color = "#16a34a",
left = 3,
}: BadgeLimitedStockProps) {
const vars: CSSProperties = { "--duration": `${duration}ms`, "--easing": easing, "--color": color } as CSSProperties;
return (
<div className={styles.badge} style={vars} aria-label={`${left} left in stock`}>
<span className={styles.label}>{left} LEFT</span>
<span className={styles.track}>
<span className={styles.fill} />
</span>
</div>
);
}08 在庫バーバッジ — 計測 累積面積 0.817% · 動いたフレーム 20/23GODRICH オリジナル · SCSS と React は zip に同梱 · 【コピペOK】css バッジ デザイン 9選 — NEW・SALE・認証バッジ
このデモが属する記事
【コピペOK】css バッジ デザイン 9選 — NEW・SALE・認証バッジサムネイルや名前の横に小さく貼りついて、いまの状態を一目で伝えるラベルがバッジです。新着・セール・認証済み・完売など、写真を使わずコードだけで作れます。ここに載せたcss バッジ デザインはどれもコピペOKで、画像ファイルは一切要りません。 この記事のデモをすべて見る
