Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Komponent postępu promienistego

Ostatnia aktualizacja:

Postęp radialny CSS Tailwind — tylko CSS — okrągły pierścień postępu ze wskazaniem procentowym. Warianty kolorów i rozmiarów, bez JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

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-progressOpieraćCykliczny wskaźnik postępu sterowany przez --radial-progress--value
radial-progress-xsRozmiarBardzo mały
radial-progress-smRozmiarMały
radial-progress-mdRozmiarŚredni (domyślny)
radial-progress-lgRozmiarDuży
radial-progress-xlRozmiarBardzo duży
radial-progress-baseKolorStonowany kolor powierzchni bazowej
radial-progress-currentKolorJawnie dziedziczy bieżący kolor tekstu
radial-progress-primaryKolorPodstawowy kolor motywu
radial-progress-secondaryKolorKolor motywu drugorzędnego
radial-progress-accentKolorKolor motywu akcentującego
radial-progress-neutralKolorNeutralny kolor motywu
radial-progress-infoKolorKolor semantyczny informacji
radial-progress-successKolorSukces semantyczny kolor
radial-progress-warningKolorOstrzeżenie kolor semantyczny
radial-progress-errorKolorBłą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

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>

Promieniowe kolory postępu

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>

Promieniowy postęp z etykietą

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>