DEV Community

loading...
Cover image for Tailwind CSS loading Spinner Examples

Tailwind CSS loading Spinner Examples

larainfo
Full Stack Developer | Laravel | Livewire | Vue Js Nodejs, tailwind css
Originally published at larainfo.com ・3 min read

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

Discussion (0)