プログレスバー

:LiTarget: 用途

進捗率表示。アニメーション・色変化・ラベル付き。

:LiSparkle: 特徴

• アニメーション
• 色変化（0-30%赤/30-70%黄/70%+緑）
• ラベル付き
• 不確定状態対応

:LiCode: コード（コピペ用）

export function ProgressBar({ value, max = 100, label, indeterminate = false }: {
  value?: number; max?: number; label?: string; indeterminate?: boolean;
}) {
  const pct = indeterminate ? 0 : Math.min(100, Math.max(0, (value! / max) * 100));
  const color = pct < 30 ? '#fb7185' : pct < 70 ? '#fbbf24' : '#34d399';

  return (
    <div>
      {label && <div style={{ fontSize: '.7rem', color: 'rgba(255,255,255,.55)', marginBottom: '.35rem', display: 'flex', justifyContent: 'space-between' }}>
        <span>{label}</span>
        {!indeterminate && <span style={{ fontFamily: 'monospace' }}>{Math.round(pct)}%</span>}
      </div>}
      <div style={{ height: 6, background: 'rgba(255,255,255,.07)', borderRadius: 3, overflow: 'hidden' }}>
        <div style={{
          height: '100%', width: indeterminate ? '40%' : pct + '%',
          background: indeterminate ? 'linear-gradient(90deg, transparent, #a5b4fc, transparent)' : color,
          transition: 'width .5s ease',
          animation: indeterminate ? 'indet 1.4s linear infinite' : undefined,
        }} />
      </div>
      <style>{`@keyframes indet { 0%{transform:translateX(-100%)} 100%{transform:translateX(250%)} }`}</style>
    </div>
  );
}

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

• 依存パッケージを忘れず追加