LoadingButton

loadingbutton-1779354174879.tsx

'use client';

import { useState } from 'react';

interface LoadingButtonProps {
  onClick: () => void;
}

const LoadingButton = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);

  const handleClick = () => {
    if (!isLoading) {
      setIsLoading(true);
      setIsSuccess(false);
      setTimeout(() => {
        setIsLoading(false);
        setIsSuccess(true);
        setTimeout(() => {
          setIsSuccess(false);
        }, 1000);
      }, 2000);
    }
  };

  return (
    <button
      className={`py-2 px-4 rounded-lg ${isLoading ? 'bg-zinc-500' : 'bg-zinc-950 hover:bg-zinc-800'} 
        text-gold transition duration-300 ${isLoading || isSuccess ? 'cursor-not-allowed' : 'cursor-pointer'}`}
      onClick={handleClick}
      disabled={isLoading || isSuccess}
    >
      {isLoading ? (
        <div className="flex items-center justify-center">
          <div className="spinner-border animate-spin rounded-full border-4 border-gold border-t-transparent w-5 h-5" />
        </div>
      ) : isSuccess ? (
        <div className="flex items-center justify-center text-gold">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 10.828 14.828 6H16.707z" clipRule="evenodd" />
          </svg>
        </div>
      ) : (
        <span className="text-gold">Click me</span>
      )}
    </button>
  );
};

export default LoadingButton;

Component info

CategoryButtons

Frameworkreact

TierFREE

Copies0

About

Button with loading spinner state

More from Buttons

'use client';

import React, { useState, useEffect } from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children }) => {
  const [x, setX] = useState(0);
  const [y,

MagneticButton

Buttons

'use client';

import React, { useState } from 'react';

interface RippleButtonProps {
  children: React.ReactNode;
  variant: 'primary' | 'secondary' | 'success' | 'danger';
  className?: string;
}

const RippleButton = ({ children, variant, classNa

RippleButton

Buttons

import { motion, useMotionValue, useSpring } from 'framer-motion';
import React from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
  className?: string;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children, cl

MagneticButton

Buttons

import React from 'react';
import { motion } from 'framer-motion';

interface LiquidButtonProps {
  children: React.ReactNode;
}

const LiquidButton: React.FC<LiquidButtonProps> = ({ children }) => {
  return (
    <motion.button
      whileHover={{

LiquidButton

Buttons