メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
Theme

放射状進行コンポーネント

最終更新日:

CSS のみ Tailwind CSS 放射状進行状況 — パーセンテージ表示付きの円形進行状況リング。色とサイズのバリエーション、JavaScript なし。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

放射状の進行状況コンポーネントは円形形式で完了率を表示し、線形の進行状況バーに代わるエレガントな代替手段を提供します。 SVG ベースの視覚化と CSS アニメーションで構築された放射状の進行状況により、ダッシュボードとステータス インジケーターに視覚的な面白さが加わります。 Frutjam 放射状進行システムは複数のサイズと色をサポートしており、メトリクス、完了追跡、データの視覚化に最適です。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス タイプ 説明
radial-progressベース--radial-progress--value によって駆動される円形の進行状況インジケーター
radial-progress-xsサイズ極小
radial-progress-smサイズ小さい
radial-progress-mdサイズ中 (デフォルト)
radial-progress-lgサイズ大きい
radial-progress-xlサイズ特大
radial-progress-base色落ち着いたベース表面色
radial-progress-current色現在のテキストの色を明示的に継承します
radial-progress-primary色主要なテーマカラー
radial-progress-secondary色二次テーマカラー
radial-progress-accent色アクセントのテーマカラー
radial-progress-neutral色ニュートラルなテーマカラー
radial-progress-info色情報セマンティックカラー
radial-progress-success色成功のセマンティックカラー
radial-progress-warning色警告セマンティックカラー
radial-progress-error色エラー セマンティック カラー

基本的な使い方

70%
<div class="radial-progress" style="--radial-progress--value:70">70%</div>

1
2
3
4
function RadialProgress() {
  const progress = {"--radial-progress--value": 70}
  return <div className="radial-progress" style={progress}>70%</div>
}

ラジアルプログレスサイズ

70%
70%
70%
70%
70%
html 
1
2
3
4
5
<div class="radial-progress radial-progress-xs" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-sm" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-md" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-lg" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-xl" style="--radial-progress--value:70">70%</div>

放射状進行色

70%
70%
70%
70%
70%
70%
70%
70%
70%
html 
1
2
3
4
5
6
7
8
9
<div class="radial-progress radial-progress-base" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-primary" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-secondary" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-accent" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-neutral" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-info" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-success" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-warning" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-error" style="--radial-progress--value:70">70%</div>

ラベルによる放射状の進歩

85%

Tasks Completed

html 
1
2
3
4
5
6
<div class="flex flex-col items-center gap-4">
  <div class="text-center">
    <div class="radial-progress radial-progress-xl radial-progress-primary" style="--radial-progress--value:85">85%</div>
    <p class="text-sm mt-2">Tasks Completed</p>
  </div>
</div>

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な 放射状の進歩 クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる