-
-
Save rubenestevao/5758dcae767b6ecefa717177d9f7995e to your computer and use it in GitHub Desktop.
Progress bar blade component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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 text-center whitespace-nowrap text-white justify-center"></div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment