Feedback & status

Spinner code

Copy the implementation or inspect every file that belongs to this component unit.

Preview Code

resources/views/components/ui/spinner.blade.php

@props([
    'size' => 'base',
    'label' => 'Loading',
])

@php
    /*
    | Indeterminate loading spinner.
    |
    | Usage:
    |   <x-ui.spinner />
    |   <x-ui.spinner size="lg" class="text-brand-500" />
    */
    $sizes = ['sm' => 'sm', 'base' => 'lg', 'lg' => '2xl', 'xl' => '4xl'];
@endphp

<span role="status" {{ $attributes->merge(['class' => 'inline-flex text-gray-400 dark:text-gray-500']) }}>
    <x-ui.icon name="spinner-gap" weight="bold" :size="$sizes[$size] ?? 'lg'" class="animate-spin" />
    <span class="sr-only">{{ $label }}</span>
</span>