UI components

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>

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>