Application toolkit - Spinners

A spinner for displaying loading state of a page or a component.

Basic

A simple loading status.

Open this basic spinners example in new window
Copy basic spinners code 
<div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-hs2-primary rounded-full" role="status" aria-label="loading">
  <span class="sr-only">Loading...</span>
</div>
Close basic spinners code

Color variants

Predefined spinner color styles.

Open this colour variants spinners example in new window
Copy colour variants spinners code 
<div class="flex flex-wrap gap-8 items-center">
  <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-hs2-primary rounded-full dark:text-white" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
  </div>

  <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-hs2-secondary rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
  </div>

  <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-hs2-info rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
  </div>

  <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-hs2-success rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
  </div>

  <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-hs2-warning rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
  </div>

  <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-hs2-danger rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
  </div>
</div>
Close colour variants spinners code

Sizes

A small size is good for loading text, default sized spin for loading a card-level block, and large spin used for loading a page.

Open this sizes spinners example in new window
Copy sizes spinners code 
<div class="flex flex-wrap gap-8 items-center">
  <div class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-hs2-primary rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
  </div>

  <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-hs2-primary rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
  </div>

  <div class="animate-spin inline-block w-8 h-8 border-[3px] border-current border-t-transparent text-hs2-primary rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
  </div>
</div>
Close sizes spinners code

Inside a card

Spin in a card.

Open this in a card spinners example in new window
Copy in a card spinners code 
<div class="min-h-[15rem] flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
  <div class="flex flex-auto flex-col justify-center items-center p-4 md:p-5">
    <div class="flex justify-center">
      <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-hs2-primary rounded-full" role="status" aria-label="loading">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  </div>
</div>
Close in a card spinners code

Customized description

Customized description content.

Open this custom description spinners example in new window
Copy custom description spinners code 
<div class="relative">
  <div class="bg-hs2-info border border-hs2-info rounded-md p-4">
    <div class="flex">
      <div class="flex-shrink-0">
        <svg class="h-4 w-4 text-white mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
        </svg>
      </div>
      <div class="ml-3">
        <h3 class="text-sm text-white font-medium">
          Attention needed
        </h3>
        <div class="text-sm text-white mt-2">
          <span class="font-semibold">Holy guacamole!</span> You should check in on some of those fields below.
        </div>
      </div>
    </div>
  </div>

  <div class="absolute top-0 left-0 w-full h-full bg-white/[.5] rounded-md dark:bg-gray-800/[.4]"></div>

  <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
    <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-hs2-primary rounded-full" role="status" aria-label="loading">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>
Close custom description spinners code