DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Tailwind CSS loading Spinner Examples
larainfo
larainfo

Posted on • Originally published at larainfo.com

Tailwind CSS loading Spinner Examples

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

Setup Project

Using CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

or

The Easiest way to install Tailwind CSS with Tailwind CLI

How to Install Tailwind CSS with NPM

Example 1

Simple loading spinner with small size, medium and large size

<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>
Enter fullscreen mode Exit fullscreen mode

larainfo.com

Example 2

Three dots animate-pulse load spinner

<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>
Enter fullscreen mode Exit fullscreen mode

larainfo.com

πŸ‘‰ 10+ Free Tailwind CSS Colors Tools Resources for 2021

Example 3

Three dots animate-pulse load spinner

<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>
Enter fullscreen mode Exit fullscreen mode

larainfo.com

Example 4

Loading spinner with using custom css

<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>
Enter fullscreen mode Exit fullscreen mode

larainfo.com

Example 5

Loading spinner with SVG Icon

<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>
Enter fullscreen mode Exit fullscreen mode

See Also πŸ‘‡

Tailwind CSS Simple Table Example
Tailwind CSS Simple Button Examples
Tailwind CSS Simple Responsive Image Gallery with Grid
Tailwind CSS Simple Alert Components Examples
Tailwind CSS Simple Card Examples
Tailwind CSS Badge Examples
Tailwind CSS Simple Modals Examples
Tailwind CSS Simple Avatar Examples

Top comments (1)

Collapse
lbrun25 profile image
Lucien Brun

Thank you very much, very useful and quick to use!

Find what you were looking for? Join hundreds of thousands of developers on DEV so you can:

Β 
🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content