<div class="kt-overlay" wire:loading @if (!empty($target)) wire:target="{{ $target }}" @endif>
    <div class="kt-overlay__inner">
        <div class="kt-overlay__content"><span class="kt-spinner"></span></div>
    </div>
</div>

@push('styles')
    <style>
        .kt-overlay {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            position: fixed;
            background: rgba(255, 255, 255, 0.75);
            z-index: 1000;
        }

        .kt-overlay__inner {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .kt-overlay__content {
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .kt-spinner {
            width: 75px;
            height: 75px;
            display: inline-block;
            border-width: 2px;
            border-color: #000;
            border-top-color: #fff;
            animation: ktspin 1s infinite linear;
            border-radius: 100%;
            border-style: solid;
        }

        @keyframes ktspin {
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
@endpush
