Modern Loading Animation for Buttons

Experience a seamless loading state with our animated button. Click to see the transformation in action.

Click the button to see the loading animation. The button will be disabled during the loading state.

Key Features

Smooth Animation

Elegant spinner animation with pulsing effect for a polished loading experience.

Responsive Design

Works perfectly on all screen sizes with consistent styling across devices.

Disabled State

Button becomes non-interactive during loading to prevent multiple submissions.

How It Works

const button = document.getElementById('demo-button');

button.addEventListener('click', () => {
  button.classList.add('active');
  
  const originalText = button.querySelector('.btn-text').textContent;
  button.querySelector('.btn-text').textContent = 'Processing...';
  
  setTimeout(() => {
    button.classList.remove('active');
    button.querySelector('.btn-text').textContent = originalText;
    
    // Show success message
    alert('Action completed successfully!');
  }, 2000);
});

JavaScript

Implementation Details

The loading state is triggered when the button is clicked. The original text is hidden and replaced with a spinner animation. A pulsing overlay provides visual feedback during the loading process.

After a simulated 2-second delay, the button returns to its original state and the text is restored. This pattern is ideal for form submissions, API calls, or any action that requires processing time.

Vanilla JS Tailwind CSS No Dependencies