Valex - Laravel Tailwind Admin Template

Border spinner

 <div class="ti-spinner" role="status">
        <span class="sr-only">Loading...</span>
    </div>

Colors

<div class="ti-spinner text-primary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="ti-spinner text-secondary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="ti-spinner text-success" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="ti-spinner text-danger" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="ti-spinner text-warning" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="ti-spinner text-info" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="ti-spinner text-light" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="ti-spinner" role="status">
        <span class="sr-only">Loading...</span>
    </div>

Basic Growing Spinner

<div class="ti-spinner !bg-black dark:!bg-light !animate-ping !border-transparent " role="status"
        aria-label="loading">
        <span class="sr-only">Loading...</span>
    </div>

Growing Spinner Sizes

Colored Growing Spinner

<div class="space-x-6 space-y-4 rtl:space-x-reverse">
        <div class="ti-spinner !animate-ping !border-transparent  bg-primary" role="status"
            aria-label="loading">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="ti-spinner !animate-ping !border-transparent  bg-secondary" role="status"
            aria-label="loading">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="ti-spinner !animate-ping !border-transparent  bg-warning" role="status"
            aria-label="loading">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="ti-spinner !animate-ping !border-transparent  bg-danger" role="status"
            aria-label="loading">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="ti-spinner !animate-ping !border-transparent  bg-success" role="status"
            aria-label="loading">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="ti-spinner !animate-ping !border-transparent  bg-info" role="status"
            aria-label="loading">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="ti-spinner !animate-ping !border-transparent  bg-black/20 dark:!bg-light dark:animate-ping "
            role="status" aria-label="loading">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="ti-spinner !animate-ping !border-transparent  bg-gray-400" role="status"
            aria-label="loading">
            <span class="sr-only">Loading...</span>
        </div>
    </div>

Alignment Flex

Loading...

<div class="flex justify-center mb-6">
        <div class="ti-spinner" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div class="flex items-center justify-between">
        <strong>Loading...</strong>
        <div class="ti-spinner" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>

Alignment Float

<div class="clearfix mb-6">
        <div class="ti-spinner float-right " role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div class="clearfix">
        <div class="ti-spinner float-start" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>

Alignment Text center

<div class="text-center">
        <div class="ti-spinner" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>

Spinner Sizes

 <div class="ti-spinner !w-[1rem] !h-[1rem] me-6" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="ti-spinner !w-[1rem] !h-[1rem] !bg-black dark:!bg-white !animate-ping !border-transparent me-6" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="ti-spinner me-6" style="width: 3rem; height: 3rem;"
        role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="ti-spinner !bg-black dark:!bg-white !animate-ping !border-transparent" style="width: 2rem; height: 2rem;" role="status">
        <span class="sr-only">Loading...</span>
    </div>

Alignment Margin

<div class="ti-spinner m-[3rem]" role="status">
        <span class="sr-only">Loading...</span>
    </div>

Buttons

 <div class="space-x-2">
        <button type="button" class="ti-btn ti-btn-disabled ti-btn-primary-full" disabled>
            <span class="ti-spinner text-white" role="status" aria-label="loading">
                <span class="sr-only">Loading...</span>
            </span>
        </button>
        <button type="button" class="ti-btn ti-btn-disabled ti-btn-primary-full" disabled>
            <span class="ti-spinner text-white" role="status" aria-label="loading"></span>
            <span>Loading...</span>
        </button>
        <button type="button" class="ti-btn ti-btn-disabled ti-btn-secondary-full" disabled>
            <span class="ti-spinner text-white" role="status" aria-label="loading">
                <span class="sr-only">Loading...</span>
            </span>
        </button>
        <button type="button" class="ti-btn ti-btn-disabled ti-btn-secondary-full" disabled>
            <span class="ti-spinner text-white" role="status" aria-label="loading"></span>
            <span>Loading...</span>
        </button>
        <button type="button" class="ti-btn ti-btn-disabled ti-btn-warning-full" disabled>
            <span class="ti-spinner text-white" role="status" aria-label="loading">
                <span class="sr-only">Loading...</span>
            </span>
        </button>
        <button type="button" class="ti-btn ti-btn-disabled ti-btn-warning-full" disabled>
            <span class="ti-spinner text-white" role="status" aria-label="loading"></span>
            <span>Loading...</span>
        </button>
        <button type="button" class="ti-btn ti-btn-disabled ti-btn-danger-full" disabled>
            <span class="ti-spinner text-white" role="status" aria-label="loading">
                <span class="sr-only">Loading...</span>
            </span>
        </button>
        <button type="button" class="ti-btn ti-btn-disabled ti-btn-danger-full" disabled>
            <span class="ti-spinner text-white" role="status" aria-label="loading"></span>
            <span>Loading...</span>
        </button>
        <button type="button" class="ti-btn ti-btn-disabled ti-btn-info-full" disabled>
            <span class="ti-spinner text-white" role="status" aria-label="loading">
                <span class="sr-only">Loading...</span>
            </span>
        </button>
        <button type="button" class="ti-btn ti-btn-disabled ti-btn-info-full" disabled>
            <span class="ti-spinner text-white" role="status" aria-label="loading"></span>
            <span>Loading...</span>
        </button>
        <button type="button" class="ti-btn ti-btn-disabled ti-btn-success-full" disabled>
            <span class="ti-spinner text-white" role="status" aria-label="loading">
                <span class="sr-only">Loading...</span>
            </span>
        </button>
        <button type="button" class="ti-btn ti-btn-disabled ti-btn-success-full" disabled>
            <span class="ti-spinner text-white" role="status" aria-label="loading"></span>
            <span>Loading...</span>
        </button>
    </div>

Switcher

Notifications

Growing Spinner Sizes

Switcher

Petey Cruiser

Jimmy Changa

Graham Cracker

Donatella Nobatti

Anne Fibbiyon

New files available

Updates Available

New Order Received

New review received

22 verified registrations

Project has been approved

Petey Cruiser

Notifications

Daneil Scott

Valex Video call

Daneil Scott

Calling...

Valex Voice call

Daneil Scott

Calling...

Spinners

Growing Spinner Sizes