Progress

Render a progress bar with optional label and chose from different layouts and semantic colors via the layout and trend properties. To display the label you may either provide a simple string via the label property or custom markup via the label slot (see example code below).

'percentage' => 50,
'label' => false,
'layout' => 'col', // col | col-reverse | row | row-reverse
'trend' => 'neutral', // neutral | positive | negative | none
<x-progress percentage="41" trend="none" />
<x-progress percentage="75" trend="neutral" />
<x-progress percentage="23" trend="positive" />
<x-progress percentage="32" trend="negative" />

37 Stimmen (von 100 benötigten)

89 Stimmen (von 100 benötigten)
37% ausgefüllt
89% ausgefüllt 
<x-progress percentage="37" trend="none">
    <x-slot:label>
        <p class="text-left">37 Stimmen <span class="text-text-subtle">(von 100 benötigten)</span></p>
    </x-slot>
</x-progress>

<x-progress percentage="89" trend="positive" layout="col-reverse">
    <x-slot:label>
        <p class="text-left">89 Stimmen <span class="text-text-subtle">(von 100 benötigten)</span></p>
    </x-slot>
</x-progress>

<x-progress percentage="37" trend="none" layout="row" label="37% ausgefüllt" />

<x-progress percentage="89" trend="positive" layout="row-reverse" label="89% ausgefüllt" />