Components

ProgressBar

Basics

The ProgressBar component allows you to create a progress indicator.

You can create a ProgressBar using the static method make().

make(float|int $value, string $size = 'sm', string|Color $color = '', bool $radial = false,)
  • $value - the value of the indicator,
  • $size - the size,
  • $color - the color,
  • $radial - radial progress indicator
use MoonShine\UI\Components\Layout\Divider;
 
ProgressBar::make(10)
<x-moonshine::progress-bar
    color="primary"
    :value="10"
>
    10%
</x-moonshine::progress-bar>

Size

Available sizes:

  • sm
  • md
  • lg
  • xl
<x-moonshine::spinner size="sm" />
<x-moonshine::spinner size="md" />
<x-moonshine::spinner size="lg" />
<x-moonshine::spinner size="xl" />

Color

Available colors:

<x-moonshine::spinner color="primary" />
<x-moonshine::spinner color="secondary" />
<x-moonshine::spinner color="success" />
<x-moonshine::spinner color="warning" />
<x-moonshine::spinner color="error" />
<x-moonshine::spinner color="info" />