Progress bar

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

Sections
- Basics
- Radial

# Basics

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

Available colors:

Purple Pink Blue Green Yellow Red Gray

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

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

33%

# Radial

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

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

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

33%