Tailwind CSS loading Spinner Examples
Tags: css, tailwindcss, webdev, tutorial
Published: 2021-08-03 07:48:58

In this tutorial we will create loading spinner, simple  loading spinner, three dot loading spinner, animation loading spinner ,loading spinner with SVG Icon, examples with Tailwind CSS

####Tool Use

######Tailwind CSS 2.x
######Heroicons Icons

👉 [View Demo](https://larainfo.com/blogs/tailwind-css-loading-spinner-example)

Setup Project

Using CDN

```html
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
```
or 

[The Easiest way to install Tailwind CSS with Tailwind CLI](https://larainfo.com/blogs/the-easiest-way-to-install-tailwind-css-with-tailwind-cli)

[How to Install Tailwind CSS with NPM](https://larainfo.com/blogs/how-to-install-tailwind-css-with-npm)

####Example 1
Simple loading spinner with small size, medium and large size
```html
<div class="flex items-center justify-center ">
    <div class="w-16 h-16 border-b-2 border-gray-900 rounded-full animate-spin"></div>
</div>
<div class="flex items-center justify-center ">
    <div class="w-24 h-24 border-l-2 border-gray-900 rounded-full animate-spin"></div>
</div>
<div class="flex items-center justify-center ">
    <div class="w-40 h-40 border-t-4 border-b-4 border-green-900 rounded-full animate-spin"></div>
</div>
```
![larainfo.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9a287i5diqzgge8hdgm.png)

####Example 2
Three dots animate-pulse load spinner
```html
<div class="flex items-center justify-center space-x-2 animate-pulse">
    <div class="w-8 h-8 bg-blue-400 rounded-full"></div>
    <div class="w-8 h-8 bg-blue-400 rounded-full"></div>
    <div class="w-8 h-8 bg-blue-400 rounded-full"></div>
</div>
```
![larainfo.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdam3759ycxcb1rmpqam.png)


👉 [10+ Free Tailwind CSS Colors Tools Resources for 2021](https://larainfo.com/blogs/10-free-tailwind-css-colors-tools-resources-for-2021)

####Example 3
Three dots animate-pulse load spinner
```html
<div class="flex items-center justify-center space-x-2 animate-bounce">
    <div class="w-8 h-8 bg-blue-400 rounded-full"></div>
    <div class="w-8 h-8 bg-green-400 rounded-full"></div>
    <div class="w-8 h-8 bg-black rounded-full"></div>
</div>
```
![larainfo.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ix48ue2mlp2t9p91heum.png)

####Example 4
Loading spinner with using custom css

```html
<div>
    <div style="border-top-color:transparent"
        class="w-16 h-16 border-4 border-blue-400 border-solid rounded-full animate-spin"></div>
</div>
<div>
    <div style="border-top-color:transparent"
        class="w-16 h-16 border-4 border-blue-400 border-dashed rounded-full animate-spin"></div>
</div>
<div>
    <div style="border-top-color:transparent"
        class="w-16 h-16 border-4 border-blue-400 border-dotted rounded-full animate-spin"></div>
</div>
<div>
    <div style="border-top-color:transparent"
        class="w-16 h-16 border-4 border-blue-400 border-double rounded-full animate-spin"></div>
</div>
```
![larainfo.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oen64odcbb3pyff2plf2.png)

####Example 5
Loading spinner with SVG Icon

```html
<div class="flex items-center justify-center ">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-24 h-24 text-red-600 animate-spin" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
            d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
    </svg>
</div>
```

###See Also 👇
[Tailwind CSS Simple Table Example](https://larainfo.com/blogs/tailwind-css-simple-table-example)
[Tailwind CSS Simple Button Examples](https://larainfo.com/blogs/tailwind-css-simple-button-examples)
[Tailwind CSS Simple Responsive Image Gallery with Grid](https://larainfo.com/blogs/tailwind-css-simple-responsive-image-gallery-with-grid)
[Tailwind CSS Simple Alert Components Examples](https://larainfo.com/blogs/tailwind-css-simple-alert-components-examples)
[Tailwind CSS Simple Card Examples](https://larainfo.com/blogs/tailwind-css-simple-card-examples)
[Tailwind CSS Badge Examples](https://larainfo.com/blogs/tailwind-css-badge-examples)
[Tailwind CSS Simple Modals Examples](https://larainfo.com/blogs/tailwind-css-simple-modals-examples)
[Tailwind CSS Simple Avatar Examples](https://larainfo.com/blogs/tailwind-css-simple-avatar-examples)