Progress bar blade component
@props([ | |
'percentage' => 0, | |
'failed' => false | |
]) | |
@php | |
$done = $failed || $percentage == 100; | |
@endphp | |
<div {{ $attributes->merge(['class' => ' space-y-1'])->whereDoesntStartWith('wire:poll') }} | |
{{-- Removes wire:poll directive when done --}} | |
{{ !$done ? $attributes->whereStartsWith('wire:poll') : null }} | |
> | |
<div class="flex justify-end space-y-1 text-xs font-semibold {{ $done ? 'text-green-500' : 'text-orange-600' }}"> | |
{{-- checkmark --}} | |
@if($done) ✓ @endif | |
{{ $percentage }}% | |
</div> | |
<div class="flex h-2 overflow-hidden rounded bg-brand-100"> | |
<div style="transform: scale({{ $percentage / 100 }}, 1)" class="{{ $done ? 'bg-green-500' : 'bg-orange-500' }} transition-transform origin-left duration-200 ease-in-out w-full shadow-none flex flex-col"></div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment