DOCUMENTATION

<div class="flex flex-wrap">
    <div class="flex justify-center items-center">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
    </div>
    <div class="flex justify-center items-center pl-2">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-500"></div>
    </div>
    <div class="flex justify-center items-center pl-2">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500"></div>
    </div>
    <div class="flex justify-center items-center pl-2">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-red-500"></div>
    </div>
    <div class="flex justify-center items-center pl-2">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-500"></div>
    </div>
    <div class="flex justify-center items-center pl-2">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-cyan-500"></div>
    </div>
    <div class="flex justify-center items-center pl-2">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-500"></div>
    </div>
    <div class="flex justify-center items-center pl-2">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-black"></div>
    </div>
</div>
<div class="flex space-x-2 animate-pulse mt-4">
    <div class="w-8 h-8 bg-blue-500 rounded-full"></div>
    <div class="w-8 h-8 bg-gray-500 rounded-full"></div>
    <div class="w-8 h-8 bg-green-500 rounded-full"></div>
    <div class="w-8 h-8 bg-red-500 rounded-full"></div>
    <div class="w-8 h-8 bg-orange-500 rounded-full"></div>
    <div class="w-8 h-8 bg-cyan-500 rounded-full"></div>
    <div class="w-8 h-8 bg-gray-500 rounded-full"></div>
    <div class="w-8 h-8 bg-black rounded-full"></div>
</div>
<div class="flex flex-wrap mt-4">
    <button class="inline-block px-6 py-2 mb-4 mr-4 text-center text-white bg-blue-300 border border-blue-300 rounded shadow-md " disabled="">
        <div class="flex justify-center items-center">
            <div class="animate-spin rounded-full h-3 w-3 border-b-2 border-white"></div>
        </div>
    </button>
    <button class="flex justify-center items-center px-6 py-2 mb-4 mr-4 text-center text-white bg-blue-300 border border-blue-300 rounded shadow-md " disabled="">
        <div class="flex justify-center items-center">
            <div class="animate-spin rounded-full h-3 w-3 border-b-2 border-white"></div>
        </div><span class="mx-2">Loading...</span>
    </button>
    <button class="inline-block px-6 py-2 mb-4 mr-4 text-center text-white bg-blue-300 border border-blue-300 rounded shadow-md " disabled="">
        <div class="animate-pulse">
            <div class="w-3 h-3 bg-white rounded-full"></div>
        </div>
    </button>
    <button class="flex justify-center items-center px-6 py-2 mb-4 mr-4 text-center text-white bg-blue-300 border border-blue-300 rounded shadow-md " disabled="">
        <div class="animate-pulse">
            <div class="w-3 h-3 bg-white rounded-full"></div>
        </div><span class="mx-2">Loading...</span>
    </button>
</div>