---
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/vi/components/radial-progress
---

# Radial Progress Component

Các thành phần tiến trình xuyên tâm hiển thị phần trăm hoàn thành ở định dạng hình tròn, cung cấp một giải pháp thay thế trang nhã cho các thanh tiến trình tuyến tính. Được xây dựng bằng hình ảnh động CSS và trực quan hóa dựa trên SVG, tiến trình xuyên tâm tăng thêm sự thú vị trực quan cho bảng điều khiển và chỉ báo trạng thái. Hệ thống tiến trình xuyên tâm Frutjam hỗ trợ nhiều kích thước và màu sắc—lý tưởng cho các số liệu, theo dõi hoàn thành và trực quan hóa dữ liệu.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học                   | Kiểu    | Sự miêu tả                                                                  |
| ------------------------- | ------- | --------------------------------------------------------------------------- |
| radial-progress           | Căn cứ  | Chỉ báo tiến trình tuần hoàn được điều khiển bởi `--radial-progress--value` |
| radial-progress-xs        | Kích cỡ | Cực nhỏ                                                                     |
| radial-progress-sm        | Kích cỡ | Bé nhỏ                                                                      |
| radial-progress-md        | Kích cỡ | Trung bình (mặc định)                                                       |
| radial-progress-lg        | Kích cỡ | Lớn                                                                         |
| radial-progress-xl        | Kích cỡ | Cực lớn                                                                     |
| radial-progress-base      | Màu sắc | Màu bề mặt cơ bản bị tắt                                                    |
| radial-progress-current   | Màu sắc | Kế thừa rõ ràng màu văn bản hiện tại                                        |
| radial-progress-primary   | Màu sắc | Màu chủ đề chính                                                            |
| radial-progress-secondary | Màu sắc | Màu chủ đề phụ                                                              |
| radial-progress-accent    | Màu sắc | Màu chủ đề nhấn mạnh                                                        |
| radial-progress-neutral   | Màu sắc | Màu chủ đề trung tính                                                       |
| radial-progress-info      | Màu sắc | Màu sắc ngữ nghĩa thông tin                                                 |
| radial-progress-success   | Màu sắc | Màu ngữ nghĩa thành công                                                    |
| radial-progress-warning   | Màu sắc | Màu ngữ nghĩa cảnh báo                                                      |
| radial-progress-error     | Màu sắc | Lỗi ngữ nghĩa màu sắc                                                       |

## Cách sử dụng cơ bản

## Kích thước tiến độ xuyên tâm

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

## Màu tiến xuyên tâm

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

## Tiến trình xuyên tâm với nhãn

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