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

# Radial Progress Component

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

## Promieniowe rozmiary postępu

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

## Promieniowe kolory postępu

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

## Promieniowy postęp z etykietą

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