Home
Shariar Hasan
Spinner Design

Spinner Design

Loader Design spinning loading dark mode supported and responsive

This tailwind example is contributed by Shariar Hasan, on 16-Feb-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader

Spinner / Loading

Author Shariar Hasan

5.4k

Fork Fullscreen

<div class="flex items-center justify-center w-full h-[100vh] text-gray-900 dark:text-gray-100 dark:bg-gray-950">
  <div>
    <h1 class="text-xl md:text-7xl font-bold flex items-center">L<svg stroke="currentColor" fill="currentColor" stroke-width="0"
        viewBox="0 0 24 24" class="animate-spin" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM13.6695 15.9999H10.3295L8.95053 17.8969L9.5044 19.6031C10.2897 19.8607 11.1286 20 12 20C12.8714 20 13.7103 19.8607 14.4956 19.6031L15.0485 17.8969L13.6695 15.9999ZM5.29354 10.8719L4.00222 11.8095L4 12C4 13.7297 4.54894 15.3312 5.4821 16.6397L7.39254 16.6399L8.71453 14.8199L7.68654 11.6499L5.29354 10.8719ZM18.7055 10.8719L16.3125 11.6499L15.2845 14.8199L16.6065 16.6399L18.5179 16.6397C19.4511 15.3312 20 13.7297 20 12L19.997 11.81L18.7055 10.8719ZM12 9.536L9.656 11.238L10.552 14H13.447L14.343 11.238L12 9.536ZM14.2914 4.33299L12.9995 5.27293V7.78993L15.6935 9.74693L17.9325 9.01993L18.4867 7.3168C17.467 5.90685 15.9988 4.84254 14.2914 4.33299ZM9.70757 4.33329C8.00021 4.84307 6.53216 5.90762 5.51261 7.31778L6.06653 9.01993L8.30554 9.74693L10.9995 7.78993V5.27293L9.70757 4.33329Z">
        </path>
      </svg> ading . . .</h1>
  </div>
</div>

Related Examples

Full Page Loading Overlay

Author:
Prashant

3 years ago

27.4k
Loading dots
Black Loading dots

Author:
Anonymous

2 years ago

38k
Tailwind spinner
loading spinner component

Author:
Arya

2 years ago

39k
Ovel shaped loading spinner

Author:
Freja Jensen

2 years ago

17.3k
Matha ghurainna Ball
Tailwind Spinner

Author:
khalidrootdevs

1 year ago

5.6k
Tailwind Spinner(Loader)
simple and precise

Author:
Tamani Phiri

2 years ago

9.3k
Loading spinner

Author:
Mohit Prajapati

3 years ago

18.1k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

5 months ago

1.1k
Tailwind CSS Loading Spinner
simple tailwind CSS spinner with some custom CSS animation

Author:
Victor M

8 months ago

1.2k
Spinner with Multiple Colored Segments

Author:
Anonymous

9 months ago

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

Author:
Menna Bashir

8 months ago

1.2k
Loading Overlay
Add loading overlay to your divs

Author:
Prajwal Hallale

3 years ago

24.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components