Steps -4

This tailwind example is contributed by farisubuntu, on 17-Aug-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are loading, loader

Spinner / Loading

Author farisubuntu

Tailwind v3.4 2.8k 5

Fork Fullscreen

<!--
  Heads up! 👋

This component comes with some `rtl` classes. Please remove them if they are not needed in your project.
-->

<div class="w-full">
  <ol
    class="grid grid-cols-1 divide-x divide-gray-100 overflow-hidden rounded-lg border border-gray-100  sm:grid-cols-3">
    <li class="flex items-center justify-center gap-2 p-4">

<p class="leading-none">
        <strong class="block font-medium"> Details </strong>
        <small class="mt-1"> Some info about you. </small>
      </p>
    </li>

<li class="relative flex items-center justify-center gap-2 bg-gray-50 p-4">
      <span
          class="absolute -left-2 top-1/2 hidden size-4 -translate-y-1/2 rotate-45 border border-gray-100 sm:block ltr:border-b-0 ltr:border-s-0 ltr:bg-white rtl:border-e-0 rtl:border-t-0 rtl:bg-gray-50"
        >
        </span>

<span
          class="absolute -right-2 top-1/2 hidden size-4 -translate-y-1/2 rotate-45 border border-gray-100 sm:block ltr:border-b-0 ltr:border-s-0 ltr:bg-gray-50 rtl:border-e-0 rtl:border-t-0 rtl:bg-white"
        >
        </span>
      <p class="leading-none">
        <strong class="block font-medium"> Address </strong>
        <small class="mt-1"> Where we sending it? </small>
      </p>
    </li>

<li class="flex items-center justify-center gap-2 p-4">

<p class="leading-none">
        <strong class="block font-medium"> Payment </strong>
        <small class="mt-1"> Show us the money. </small>
      </p>
    </li>
  </ol>
</div>

Related Examples

Square loading spinner

Freja Jensen

3 years ago

15.3k
Ovel shaped loading spinner

Freja Jensen

3 years ago

18.6k
Spinner Design
Loader Design spinning loading dark mode supported and responsive

Shariar Hasan

2 years ago

6.6k
Spinners with shadow

Samuel Dawson

3 years ago

9.2k
animate-spin spinner

Piet Vriend

3 years ago

11.4k
Matha ghurainna Ball
Tailwind Spinner

khalidrootdevs

2 years ago

6.4k
loader
loader

Ganesh Salunke

8 months ago

926
Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Md. Tofayel islam

2 years ago

3.5k
tailwind loading animation
Spinner component provides a dynamic loader indicator with animated

Menna Bashir

1 year ago

2.5k
Spinner with Multiple Colored Segments

Anonymous

1 year ago

3.3k
Loding spinner with image inside

JaxStone

3 years ago

17.4k
Tailwind Spinner(Loader)
simple and precise

Tamani Phiri

3 years ago

10.2k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.