<x-loading />
<x-loading class="text-primary loading-lg" />
<x-loading class="loading-dots" />
<x-loading class="loading-bars" />
<x-loading class="loading-ring" />
<x-loading class="loading-infinity" />

<x-progress value="12" max="100" />
<x-progress value="12" max="100" class="progress-warning h-3" />
<x-progress value="12" max="100" class="w-56 progress-error" />
<x-progress class="progress-primary h-0.5" indeterminate />

<x-progress-radial value="56" />
<x-progress-radial value="78" unit="h" class="text-warning" />
<x-progress-radial value="87" class="text-primary" />
 
{{-- For futher customization use `style` --}}
<x-progress-radial value="12" class="bg-primary text-primary-content border-4 border-primary" />
<x-progress-radial value="98" class="text-success" style="--size:6rem; --thickness: 2px" />

<div class="flex gap-5">
    <x-input placeholder="Name ..." wire:model.live.debounce="name" />
    <x-button label="Save" wire:click="save" />
</div>
 
{{-- Always --}}
<x-hr />
 
<div>
    The above HR always triggers. The bellow only on target action.
</div>
 
{{-- Only on `save` action --}}
<x-hr target="save" />