Progress プログレスバー

LhProgress はタスクや容量の進捗を表示するコンポーネントです。ライン型とサークル型の 2 つの形状に対応し、色とテキストをカスタマイズできます。

基本的な使い方

ライン型プログレスバー

60%

<script setup lang="ts">
</script>

<template>
  <LhProgress :percentage="60" />
</template>

<script>
export default {}
</script>

<template>
  <LhProgress :percentage="60" />
</template>

ステータス

normal / success / warning / exception。100 に到達すると自動的に success になる

100%

80%

40%

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <LhProgress :percentage="100" />
    <LhProgress :percentage="80" status="warning" />
    <LhProgress :percentage="40" status="exception" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <LhProgress :percentage="100" />
    <LhProgress :percentage="80" status="warning" />
    <LhProgress :percentage="40" status="exception" />
  </div>
</template>

色とテキストのカスタマイズ

color は文字列と関数をサポート。format でテキストをカスタマイズ

55%

70 分

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <LhProgress :percentage="55" color="#B8860B" />
    <LhProgress
      :percentage="70"
      :color="(p: number) => `hsl(${p * 1.2}, 60%, 45%)`"
      :format="(p: number) => `${p} 分`"
    />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <LhProgress :percentage="55" color="#B8860B" />
    <LhProgress
      :percentage="70"
      :color="(p: number) => `hsl(${p * 1.2}, 60%, 45%)`"
      :format="(p: number) => `${p} 分`"
    />
  </div>
</template>

サークル型

type に circle を指定

75%

100%

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; align-items: center; gap: 24px">
    <LhProgress type="circle" :percentage="75" />
    <LhProgress type="circle" :percentage="100" :width="100" :stroke-width="8" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; align-items: center; gap: 24px">
    <LhProgress type="circle" :percentage="75" />
    <LhProgress type="circle" :percentage="100" :width="100" :stroke-width="8" />
  </div>
</template>

テキストを表示しない

showText に false を指定

<script setup lang="ts">
</script>

<template>
  <LhProgress :percentage="45" :show-text="false" />
</template>

<script>
export default {}
</script>

<template>
  <LhProgress :percentage="45" :show-text="false" />
</template>

API

Props

プロパティ名	説明	型	デフォルト値
percentage	進捗パーセンテージ。[0, 100] を超えると自動的にクランプされる	number	0
type	形状	"line" | "circle"	'line'
status	ステータス。normal のとき 100 に到達すると自動的に success になる	"normal" | "success" | "warning" | "exception"	'normal'
color	プログレスバーの色。文字列またはパーセンテージから色を返す関数	string | ((percentage: number) => string)	—
strokeWidth	線の太さ px（line では高さ、circle ではストローク幅）	number	6
width	サークルモードのキャンバス幅 px	number	126
showText	テキストを表示するか	boolean	true
format	テキストのカスタムフォーマット	(percentage: number) => string	—
sx	sx クイックレイアウトプロパティ	LhSxProps	—

Slots

スロット名	説明	スコープ
text	テキスト内容をカスタマイズ	{ percentage }

アクセシビリティ

• ルート要素に role="progressbar" と aria-valuemin / aria-valuemax / aria-valuenow があり、WAI-ARIA progressbar パターンに準拠
• aria-valuetext が表示テキストと同期。デフォルトはパーセンテージで、format を渡すとフォーマット後のテキストが読み上げられる（例：「42 分」）
• クランプ後の値が aria-valuenow に同期するため、範囲外の値が読み上げられることはない

型定義

本コンポーネントが外部にエクスポートする TypeScript 型構造は以下のとおりです（packages/components/progress/src/types.ts および @lh-ui/share/core/* ソースから自動抽出。各エントリをクリックすると完全な定義を確認できます。プロパティの説明は上記の Props 表を参照してください）：

LhProgressProps

export interface LhProgressProps {
  /** 進捗パーセンテージ 0-100（範囲外は自動的にクランプされる） */
  percentage: number
  type?: LhProgressType
  status?: LhProgressStatus
  /** プログレスバーの色。文字列またはパーセンテージから色を返す関数 */
  color?: string | ((percentage: number) => string)
  /** 線の太さ px（line では高さ、circle ではストローク幅） */
  strokeWidth?: number
  /** サークルモードのキャンバス幅 px */
  width?: number
  showText?: boolean
  /** テキストのカスタムフォーマット */
  format?: (percentage: number) => string
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhProgressType _{（@lh-ui/share/core/progress から）}

export type LhProgressType = 'line' | 'circle'

LhProgressStatus _{（@lh-ui/share/core/progress から）}

export type LhProgressStatus = 'normal' | 'success' | 'warning' | 'exception'