Progress

>= v1.21

Progress component.

Progress, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->progress()
    ->block('block', 'classes');
 
TallStackUi::personalize()
    ->progress('circle')
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

Progress Circle, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->progress()
    ->block('block', 'classes');
 
TallStackUi::personalize()
    ->progress('circle')
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

# Basic Usage

50%

50.55%

<!-- As integer -->
<x-progress :percent="50" />
 
<!-- As string -->
<x-progress percent="50.55" />

# Styles

50%

Percentage

50%

<x-progress :percent="50" />
<x-progress :percent="50" title="Percentage" />
<x-progress :percent="50" floating />

# Without Text

An option to do not display any text.

<x-progress :percent="50" without-text />

# Size Variations

50%

<x-progress :percent="50" xs />
<x-progress :percent="50" sm />
<x-progress :percent="50" md />
<x-progress :percent="50" lg />

# Color Variations

50%

<x-progress :percent="50" />
<x-progress :percent="50" color="secondary" />
<x-progress :percent="50" color="slate" />
<x-progress :percent="50" color="gray" />
<x-progress :percent="50" color="zinc" />
<x-progress :percent="50" color="neutral" />
<x-progress :percent="50" color="stone" />
<x-progress :percent="50" color="red" />
<x-progress :percent="50" color="orange" />
<x-progress :percent="50" color="amber" />
<x-progress :percent="50" color="yellow" />
<x-progress :percent="50" color="lime" />
<x-progress :percent="50" color="green" />
<x-progress :percent="50" color="emerald" />
<x-progress :percent="50" color="teal" />
<x-progress :percent="50" color="cyan" />
<x-progress :percent="50" color="sky" />
<x-progress :percent="50" color="blue" />
<x-progress :percent="50" color="indigo" />
<x-progress :percent="50" color="violet" />
<x-progress :percent="50" color="purple" />
<x-progress :percent="50" color="fuchsia" />
<x-progress :percent="50" color="pink" />
<x-progress :percent="50" color="rose" />
<x-progress :percent="50" color="black" />
<x-progress :percent="50" color="white" />

# Light Variations

50%

<x-progress :percent="50" light />
<x-progress :percent="50" color="secondary" light />
<x-progress :percent="50" color="slate" light />
<x-progress :percent="50" color="gray" light />
<x-progress :percent="50" color="zinc" light />
<x-progress :percent="50" color="neutral" light />
<x-progress :percent="50" color="stone" light />
<x-progress :percent="50" color="red" light />
<x-progress :percent="50" color="orange" light />
<x-progress :percent="50" color="amber" light />
<x-progress :percent="50" color="yellow" light />
<x-progress :percent="50" color="lime" light />
<x-progress :percent="50" color="green" light />
<x-progress :percent="50" color="emerald" light />
<x-progress :percent="50" color="teal" light />
<x-progress :percent="50" color="cyan" light />
<x-progress :percent="50" color="sky" light />
<x-progress :percent="50" color="blue" light />
<x-progress :percent="50" color="indigo" light />
<x-progress :percent="50" color="violet" light />
<x-progress :percent="50" color="purple" light />
<x-progress :percent="50" color="fuchsia" light />
<x-progress :percent="50" color="pink" light />
<x-progress :percent="50" color="rose" light />
<x-progress :percent="50" color="black" light />
<x-progress :percent="50" color="white" light />

# Footer Slot

50%

TallStackUI

<x-progress :percent="50">
    <x-slot:footer>
        TallStackUI
    </x-slot:footer>
</x-progress>

Circle