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.
Promieniowe komponenty postępu wyświetlają procent ukończenia w formacie okrągłym, oferując elegancką alternatywę dla liniowych pasków postępu. Zbudowany z wizualizacji opartej na SVG i animacji CSS, radialny postęp zwiększa atrakcyjność wizualną pulpitów nawigacyjnych i wskaźników stanu. System postępu radialnego Frutjam obsługuje wiele rozmiarów i kolorów — idealnie nadaje się do metryk, śledzenia ukończenia i wizualizacji danych.
Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
| Klasa | Typ | Opis |
|---|---|---|
| radial-progress | Opierać | Cykliczny wskaźnik postępu sterowany przez --radial-progress--value |
| radial-progress-xs | Rozmiar | Bardzo mały |
| radial-progress-sm | Rozmiar | Mały |
| radial-progress-md | Rozmiar | Średni (domyślny) |
| radial-progress-lg | Rozmiar | Duży |
| radial-progress-xl | Rozmiar | Bardzo duży |
| radial-progress-base | Kolor | Stonowany kolor powierzchni bazowej |
| radial-progress-current | Kolor | Jawnie dziedziczy bieżący kolor tekstu |
| radial-progress-primary | Kolor | Podstawowy kolor motywu |
| radial-progress-secondary | Kolor | Kolor motywu drugorzędnego |
| radial-progress-accent | Kolor | Kolor motywu akcentującego |
| radial-progress-neutral | Kolor | Neutralny kolor motywu |
| radial-progress-info | Kolor | Kolor semantyczny informacji |
| radial-progress-success | Kolor | Sukces semantyczny kolor |
| radial-progress-warning | Kolor | Ostrzeżenie kolor semantyczny |
| radial-progress-error | Kolor | Błąd koloru semantycznego |
Podstawowe użycie
<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> } |
Promieniowe rozmiary postępu
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> |
Promieniowe kolory postępu
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> |
Promieniowy postęp z etykietą
Tasks Completed
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> |