# Spinners

# Rotating Spinners

		  <div role="status" class="inline-block w-8 h-8 border-4 border-gray-800 rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div role="status" class="inline-block w-8 h-8 border-4 border-gray-800 rounded-full border-t-transparent border-r-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div
  role="status"
  class="inline-block w-8 h-8 border-4 border-gray-800 rounded-full border-t-transparent border-r-transparent border-b-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div role="status" class="inline-block w-8 h-8 border-4 border-gray-800 rounded-full border-t-transparent border-b-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div role="status" class="inline-block w-8 h-8 border-4 border-gray-800 border-dotted rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>

		  <div role="status" className="inline-block w-8 h-8 border-4 border-gray-800 rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div role="status" className="inline-block w-8 h-8 border-4 border-gray-800 rounded-full border-t-transparent border-r-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div
  role="status"
  className="inline-block w-8 h-8 border-4 border-gray-800 rounded-full border-t-transparent border-r-transparent border-b-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div role="status" className="inline-block w-8 h-8 border-4 border-gray-800 rounded-full border-t-transparent border-b-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div role="status" className="inline-block w-8 h-8 border-4 border-gray-800 border-dotted rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>

# Growing Spinner

		  <div role="status" class="inline-block w-4 h-4 m-2 bg-gray-800 rounded-full animate-ping"><span class="sr-only">Loading...</span></div>

		  <div role="status" className="inline-block w-4 h-4 m-2 bg-gray-800 rounded-full animate-ping"><span className="sr-only">Loading...</span></div>

# Rotating Spinner colors

		  <div role="status" class="inline-block w-8 h-8 border-4 border-blue-500 rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div role="status" class="inline-block w-8 h-8 border-4 border-gray-500 rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div role="status" class="inline-block w-8 h-8 border-4 border-green-500 rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div role="status" class="inline-block w-8 h-8 border-4 border-red-500 rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div role="status" class="inline-block w-8 h-8 border-4 border-yellow-500 rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div role="status" class="inline-block w-8 h-8 border-4 border-teal-500 rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div role="status" class="inline-block w-8 h-8 border-4 border-gray-200 rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div role="status" class="inline-block w-8 h-8 border-4 border-gray-800 rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>

		  <div role="status" className="inline-block w-8 h-8 border-4 border-blue-500 rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div role="status" className="inline-block w-8 h-8 border-4 border-gray-500 rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div role="status" className="inline-block w-8 h-8 border-4 border-green-500 rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div role="status" className="inline-block w-8 h-8 border-4 border-red-500 rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div role="status" className="inline-block w-8 h-8 border-4 border-yellow-500 rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div role="status" className="inline-block w-8 h-8 border-4 border-teal-500 rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div role="status" className="inline-block w-8 h-8 border-4 border-gray-200 rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div role="status" className="inline-block w-8 h-8 border-4 border-gray-800 rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>

# Growing Spinner colors

		  <div role="status" class="inline-block w-4 h-4 m-2 bg-blue-500 rounded-full animate-ping"><span class="sr-only">Loading...</span></div>
<div role="status" class="inline-block w-4 h-4 m-2 bg-gray-500 rounded-full animate-ping"><span class="sr-only">Loading...</span></div>
<div role="status" class="inline-block w-4 h-4 m-2 bg-green-500 rounded-full animate-ping"><span class="sr-only">Loading...</span></div>
<div role="status" class="inline-block w-4 h-4 m-2 bg-red-500 rounded-full animate-ping"><span class="sr-only">Loading...</span></div>
<div role="status" class="inline-block w-4 h-4 m-2 bg-yellow-500 rounded-full animate-ping"><span class="sr-only">Loading...</span></div>
<div role="status" class="inline-block w-4 h-4 m-2 bg-teal-500 rounded-full animate-ping"><span class="sr-only">Loading...</span></div>
<div role="status" class="inline-block w-4 h-4 m-2 bg-gray-200 rounded-full animate-ping"><span class="sr-only">Loading...</span></div>
<div role="status" class="inline-block w-4 h-4 m-2 bg-gray-800 rounded-full animate-ping"><span class="sr-only">Loading...</span></div>

		  <div role="status" className="inline-block w-4 h-4 m-2 bg-blue-500 rounded-full animate-ping"><span className="sr-only">Loading...</span></div>
<div role="status" className="inline-block w-4 h-4 m-2 bg-gray-500 rounded-full animate-ping"><span className="sr-only">Loading...</span></div>
<div role="status" className="inline-block w-4 h-4 m-2 bg-green-500 rounded-full animate-ping"><span className="sr-only">Loading...</span></div>
<div role="status" className="inline-block w-4 h-4 m-2 bg-red-500 rounded-full animate-ping"><span className="sr-only">Loading...</span></div>
<div role="status" className="inline-block w-4 h-4 m-2 bg-yellow-500 rounded-full animate-ping"><span className="sr-only">Loading...</span></div>
<div role="status" className="inline-block w-4 h-4 m-2 bg-teal-500 rounded-full animate-ping"><span className="sr-only">Loading...</span></div>
<div role="status" className="inline-block w-4 h-4 m-2 bg-gray-200 rounded-full animate-ping"><span className="sr-only">Loading...</span></div>
<div role="status" className="inline-block w-4 h-4 m-2 bg-gray-800 rounded-full animate-ping"><span className="sr-only">Loading...</span></div>

# Spinner Sizes

		  <div role="status" class="inline-block w-12 h-12 border-4 border-gray-800 rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div role="status" class="inline-block w-8 h-8 border-4 border-gray-800 rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>
<div role="status" class="inline-block w-4 h-4 border-2 border-gray-800 rounded-full border-t-transparent animate-spin">
  <span class="sr-only">Loading...</span>
</div>

		  <div role="status" className="inline-block w-12 h-12 border-4 border-gray-800 rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div role="status" className="inline-block w-8 h-8 border-4 border-gray-800 rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>
<div role="status" className="inline-block w-4 h-4 border-2 border-gray-800 rounded-full border-t-transparent animate-spin">
  <span className="sr-only">Loading...</span>
</div>

# Buttons with spinners

		  <button
  type="button"
  disabled="disabled"
  class="inline-block px-3 py-2 m-1 text-base font-normal leading-6 text-center text-white align-middle bg-blue-600 border-transparent border-solid rounded cursor-pointer hover:bg-blue-700 active:bg-blue-700 focus:outline-none disabled:opacity-75 disabled:cursor-not-allowed">
  <div role="status" class="inline-block w-4 h-4 align-text-top border-2 border-gray-200 rounded-full border-t-transparent animate-spin">
    <span class="sr-only">Loading...</span>
  </div>
  Loading...
</button>

		  <button
  type="button"
  disabled="disabled"
  className="inline-block px-3 py-2 m-1 text-base font-normal leading-6 text-center text-white align-middle bg-blue-600 border-transparent border-solid rounded cursor-pointer hover:bg-blue-700 active:bg-blue-700 focus:outline-none disabled:opacity-75 disabled:cursor-not-allowed">
  <div role="status" className="inline-block w-4 h-4 align-text-top border-2 border-gray-200 rounded-full border-t-transparent animate-spin">
    <span className="sr-only">Loading...</span>
  </div>
  Loading...
</button>

← Progress Media object →