Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Thành phần tiến độ xuyên tâm

Cập nhật lần cuối:

Tiến trình xuyên tâm CSS Tailwind chỉ dành cho CSS — vòng tiến trình hình tròn có hiển thị phần trăm. Các biến thể màu sắc và kích thước, không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

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

<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

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

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

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp Tiến độ xuyên tâm chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP