YNEX - 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>

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

<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 ltr:float-right rtl:float-left" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<div class="clearfix">
    <div class="ti-spinner ltr:float-left rtl:float-right" 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="flex items-center">
        <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 w-12 h-12"
            role="status">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="ti-spinner !bg-black dark:!bg-white !animate-ping !border-transparent w-8 h-8" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>

Alignment Margin

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

Buttons

 <div class="">
    <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

Spinners