React Tailwind CSS Loading Button Example

In this tutorial, we will create loading state button in react js using tailwind css. We will see loading button with using hooks, loading buttons with setTimeout, loading button icon spinner example with Tailwind CSS & React.

Tool Use

React JS

Tailwind CSS 3.v

First you need to setup react project with tailwind css. You can install manually or you read below blog.

How to install Tailwind CSS in React

Install & Setup Vite + React + Typescript + Tailwind CSS 3

Example 1

Create simple loading button using tailwind and react js.

import { useState } from "react";

export default function App() {
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    setLoading(true);
  };
  return (
    <>
      <div className="flex justify-center items-center h-screen">
        <button
          className={`bg-purple-500 hover:bg-purple-700 text-white py-2 px-4 rounded ${loading}`}
          onClick={handleClick}
          disabled={loading}
        >
          {loading ? "Loading..." : "Loading Button"}
        </button>
      </div>
    </>
  );
}

React tailwind loading button with cursor not allowed and opacity.

import { useState } from "react";

export default function App() {
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    setLoading(true);
  };
  return (
    <>
      <div className="flex justify-center items-center h-screen">
        <button
          className={`bg-purple-500 hover:bg-purple-700 text-white py-2 px-4 rounded ${
            loading ? "cursor-not-allowed opacity-25" : ""
          }`}
          onClick={handleClick}
          disabled={loading}
        >
          {loading ? "Loading..." : "Loading Button"}
        </button>
      </div>
    </>
  );
}

react tailwind loading button

Example 2

React tailwind loading button setTimeout for 2 second using react hook.

import { useState } from "react";

export default function App() {
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    setLoading(true);
    // Perform operation and then set loading to false
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  };
  return (
    <>
      <div className="flex justify-center items-center h-screen">
        <button
          className={`bg-purple-500 hover:bg-purple-700 text-white py-2 px-4 rounded ${
            loading ? "cursor-not-allowed opacity-25" : ""
          }`}
          onClick={handleClick}
          disabled={loading}
        >
          {loading ? "Loading..." : "Loading Button"}
        </button>
      </div>
    </>
  );
}

Example 3

React tailwind SVG Icon loading button with Animation spin.

import { useState } from "react";

export default function App() {
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    setLoading(true);
    // Perform operation and then set loading to false
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  };
  return (
    <>
      <div className="flex justify-center items-center h-screen">
        <button
          className={`bg-purple-500 hover:bg-purple-700 text-white py-2 px-4 rounded ${
            loading ? "cursor-not-allowed opacity-25" : ""
          }`}
          onClick={handleClick}
          disabled={loading}
        >
          {loading ? (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              className="w-6 h-6 animate-spin"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
              />
            </svg>
          ) : (
            "Loading Button"
          )}
        </button>
      </div>
    </>
  );
}

react tailwind svg Icon loading button