Chuyển đến nội dung chính
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.

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-progressCă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-xsKích cỡCực nhỏ
radial-progress-smKích cỡBé nhỏ
radial-progress-mdKích cỡTrung bình (mặc định)
radial-progress-lgKích cỡLớn
radial-progress-xlKích cỡCực lớn
radial-progress-baseMàu sắcMàu bề mặt cơ bản bị tắt
radial-progress-currentMàu sắcKế thừa rõ ràng màu văn bản hiện tại
radial-progress-primaryMàu sắcMàu chủ đề chính
radial-progress-secondaryMàu sắcMàu chủ đề phụ
radial-progress-accentMàu sắcMàu chủ đề nhấn mạnh
radial-progress-neutralMàu sắcMàu chủ đề trung tính
radial-progress-infoMàu sắcMàu sắc ngữ nghĩa thông tin
radial-progress-successMàu sắcMàu ngữ nghĩa thành công
radial-progress-warningMàu sắcMàu ngữ nghĩa cảnh báo
radial-progress-errorMàu sắcLỗi ngữ nghĩa màu sắc

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

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

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

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>

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

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>

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

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>