---
title: "Radial Progress"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS Radial Progress for circular indicators. Custom sizes, stroke widths, and colors for dashboards, metrics, and performance displays."
url: https://frutjam.com/zh-hant/components/radial-progress
---

# Radial Progress Component

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

## 基本用法

## 徑向進度尺寸

```html
<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>
```

## 徑向進度顏色

```html
<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>
```

## 帶標籤的徑向進度

```html
<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>
```