跳至主要內容
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 Code、Cursor 或其他 AI 編輯器？

Cherry MCP 為您的 AI 編輯器按需提供準確的 放射狀進步 類別名稱和結構。不再有幻覺課程。

嘗試Cherry MCP