Progress bar

# Basics

The moonshine::progress-bar component allows you to create a progress bar.

Available colors:

primary secondary success warning error info

<x-moonshine::progress-bar
    color="primary"
    :value="33"
>
    33%
</x-moonshine::progress-bar>

<x-moonshine::progress-bar
    color="primary"
    :value="33"
>
    33%
</x-moonshine::progress-bar>

33%

# Radial

To create a radial progress indicator, you need to pass the radial parameter to the component with the value TRUE.

Available sizes:

sm md lg xl

<x-moonshine::progress-bar
    color="secondary"
    :radial="true"
    :value="33"
    size="md"
>
    33%
</x-moonshine::progress-bar>

<x-moonshine::progress-bar
    color="secondary"
    :radial="true"
    :value="33"
    size="md"
>
    33%
</x-moonshine::progress-bar>

33%