跳至主要內容
Frutjam logo Frutjam
v2.2.2
Theme

Radial Progress Component

CSS-only Tailwind CSS radial progress — circular progress ring with percentage display. Color and size variants, no JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

徑向進度組件以圓形格式顯示完成百分比，為線性進度條提供了優雅的替代方案。徑向進度採用基於 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>