Komponenten

Progress Circles

Kreisförmige Fortschrittsanzeigen für verbleibende Ressourcen oder den Stand einer gewünschten Aktion.

Verwendung

Ein Progress Circle zeigt einen Prozentwert, zum Beispiel das verbrauchte Kontingent eines Plans oder wie vollständig ein Profil ausgefüllt ist.

Standard-Progress-Circle

blade

<gedisa:progress.circle value="40" label="Aktive Nutzer" />

Größen

Fünf Größen von xxs (64px) bis lg (280px). Der Standard ist sm. Bei xxs steht das Label unter dem Kreis.

xxs bis lg

blade

<gedisa:progress.circle size="xxs" value="40" label="Nutzer" />
<gedisa:progress.circle size="xs" value="40" label="Aktive Nutzer" />
<gedisa:progress.circle size="sm" value="40" label="Aktive Nutzer" />
<gedisa:progress.circle size="md" value="40" label="Aktive Nutzer" />
<gedisa:progress.circle size="lg" value="40" label="Aktive Nutzer" />

Halbkreis

Mit variant="half" wird der Fortschritt als Halbkreis dargestellt.

Halbkreise

blade

<gedisa:progress.circle variant="half" size="xs" value="40" label="Aktive Nutzer" />
<gedisa:progress.circle variant="half" size="sm" value="40" label="Aktive Nutzer" />
<gedisa:progress.circle variant="half" size="md" value="40" label="Aktive Nutzer" />

Livewire

Änderungen des Werts werden animiert. Das Beispiel berechnet die Vollständigkeit eines Profils aus den gesetzten Angaben.

Profil vervollständigen

Profilbild

Name

Adresse

Telefon

blade

<gedisa:progress.circle size="xs" :value="count(array_filter($profile))" :max="count($profile)" label="Profil" />

Referenz

Diese Übersicht umfasst die gezeigten Attribute. Das Element setzt role="progressbar" und die passenden ARIA-Werte automatisch.

gedisa:progress.circle

Eigenschaft	Werte	Default
value	Aktueller Wert
max	Maximalwert für die Prozentberechnung	`100`
size	`xxs`, `xs`, `sm`, `md`, `lg`	`sm`
variant	`circle`, `half`	`circle`
label	Beschriftung, zugleich zugänglicher Name