kernl-ui

Loaders

These components can be used for loading states.

Dark loader on light background

            <div aria-live="polite" aria-busy="true" class="relative p-8 bg-gray-200" style="min-height: 320px">
    <div class="absolute inset-0 flex items-center justify-center">
        <!-- Semi-transparent overlay -->
        <div class="absolute inset-0 bg-white bg-opacity-40"></div>
        <!-- Loading spinner -->
        <i data-feather="loader" aria-label="Loading" class="w-6 h-6 animate-spin text-gray-600"></i>
    </div>
    <p>You content goes here</p>
</div>

Light loader on dark background

            <div aria-live="polite" aria-busy="true" class="relative p-8 text-white bg-gray-700" style="min-height: 320px">
    <div class="absolute inset-0 flex items-center justify-center">
        <!-- Semi-transparent overlay -->
        <div class="absolute inset-0 bg-black bg-opacity-40"></div>
        <!-- Loading spinner -->
        <i data-feather="loader" aria-label="Loading" class="w-6 h-6 animate-spin text-white"></i>
    </div>
    <p>You content goes here</p>
</div>

Usage

Coming soon.

Accessibility Requirements

Coming soon.