Response Details (ID: 182 - UIGEN-X-32B-0727)

Text Before HTML:

We are going to add a loading animation to a button that is triggered on click.
 The button will have a spinner (loading) animation when clicked, and we'll simulate a delay to show the animation.

 Steps:
 1. We'll create a button with an initial state (normal).
 2. On click, we'll change the button to a loading state (show spinner and disable the button).
 3. After a simulated delay (e.g., 2 seconds), we'll revert the button to its original state.

 We'll use Tailwind CSS for styling and some custom CSS for the spinner animation.

 Note: We are using the same design language as the provided template (dark theme, similar colors, etc.)

 We'll use:
   - A spinner (circle animation) for the loading state.
   - Tailwind classes for transitions and state changes.

 Let's define the button in the context of the template.

 We'll add the button in the "Contact" section, for example, in the CTA section at the bottom.

 However, note: the requirement is to add a loading animation to a button that is triggered on click.

 We'll create a button in the CTA section and also in the footer to demonstrate.

 We'll use JavaScript to handle the click event and toggle the loading state.

 We'll use the following structure for the button:

   
     Get Started
     
   

 When the button is clicked:
   - Hide the text, show the spinner, and disable the button.

 After the delay:
   - Show the text, hide the spinner, and enable the button.

 We'll use Tailwind classes for the spinner animation (we can define a keyframe animation in the style tag).

 Let's define the spinner animation in the style tag (similar to the template's style section).

 We'll use the same color scheme: primary color (rgb(255, 106, 0)) for the spinner.

 We'll also add a transition for the background color and text color.

 We'll use the following custom CSS for the spinner:

   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }

   .spinner {
     display: inline-block;
     width: 20px;
     height: 20px;
     border: 3px solid rgba(255, 106, 0, 0.3);
     border-radius: 50%;
     border-top-color: rgb(255, 106, 0);
     animation: spin 1s ease-in-out infinite;
   }

 We'll add this to the existing style section.

 We'll also going to use JavaScript to handle the button state.

 We'll add a script at the bottom to handle the button click.

 We'll create two buttons: one in the main CTA section and one in the footer, but for simplicity, we'll do one in the main CTA.

 We'll modify the existing CTA button in the template to have this loading state.

 Original CTA button in the template:

   Get Started

 We'll change it to:

   
     Get Started
     
   

 Then we'll write the JavaScript to handle the click.

 We'll also add a transition for the button background and text color when it's clicked (optional).

 Let's do it in the main CTA section and also in the footer CTA for consistency.

 However, note: the requirement is to add a loading animation to a button that is triggered on click.

 We'll do it for the main CTA button and also for the "Buy Template" button in the footer.

 We'll use the same approach for both.

 Steps for the button:

   - Initially, the spinner is hidden and the text is visible.
   - On click:
        button.disabled = true;
        button.querySelector('.button-text').classList.add('hidden');
        button.querySelector('.spinner').classList.remove('hidden');

   - After 2 seconds (simulate an action), we revert.

 We'll use:

   setTimeout(() => {
        button.disabled = false;
        button.querySelector('.button-text').classList.remove('hidden');
        button.querySelector('.spinner').classList.add('hidden');
   }, 2000);

 We'll also add a class to the button when it's loading to change the cursor and maybe the background.

 We can add a class 'opacity-75' to the button when loading to indicate it's disabled.

 But note: we are already disabling the button, so the cursor will change automatically.

 We'll also add a transition for the opacity.

 Let's update the style section with the spinner animation and the button transitions.

 We'll add the following to the style section:

   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }

   .spinner {
     display: inline-block;
     width: 20px;
     height: 20px;
     border: 3px solid rgba(255, 106, 0, 0.3);
     border-radius: 50%;
     border-top-color: rgb(255, 106, 0);
     animation: spin 1s ease-in-out infinite;
     margin-left: 8px;
     vertical-align: middle;
   }

   .btn-loading {
     opacity: 0.75;
     transition: opacity 0.2s ease;
   }

 Then in the button, we'll add a class 'btn-loading' when loading.

 But note: we are disabling the button, so we don't need the opacity transition? 
 However, we can still add it for a smoother effect.

 Alternatively, we can use the disabled state which already has a lower opacity.

 We'll rely on the browser's default disabled style.

 We'll just show the spinner and hide the text.

 We'll update the main CTA button and the footer CTA button.

 Let's do it for the main CTA button first.

 We'll also add the spinner to the footer CTA button.

 We'll create a function to handle the button state and reuse it for both buttons.

 We'll add the following script at the bottom of the body, inside the existing script tag.

   document.addEventListener('DOMContentLoaded', function() {
     // ... existing code ...

     // Function to handle button loading state
     function handleButtonLoading(button) {
        const buttonText = button.querySelector('.button-text');
        const spinner = button.querySelector('.spinner');
        const originalText = buttonText.textContent;

        // Set loading state
        button.disabled = true;
        buttonText.classList.add('hidden');
        spinner.classList.remove('hidden');

        // After 2 seconds, revert
        setTimeout(() => {
            button.disabled = false;
            buttonText.textContent = originalText; // in case the text was changed during the process
            buttonText.classList.remove('hidden');
            spinner.classList.add('hidden');
        }, 2000);
     }

     // Attach to the main CTA button
     const mainCtaButton = document.getElementById('cta-button');
     if (mainCtaButton) {
        mainCtaButton.addEventListener('click', function() {
            handleButtonLoading(this);
        });
     }

     // Attach to the footer CTA button
     const footerCtaButton = document.getElementById('footer-cta-button');
     if (footerCtaButton) {
        footerCtaButton.addEventListener('click', function() {
            handleButtonLoading(this);
        });
     }
   });

 We'll update the buttons in the HTML to include the spinner and the button-text span.

 For the main CTA button in the template:

   Original:
     Get Started

   Updated:
     
        Get Started
        
     

 Similarly for the footer CTA button.

 We'll also update the footer CTA button to have an id of "footer-cta-button".

 Let's do it.

 Note: We are using the same color and style for the spinner as the primary color.

 We'll also adjust the spinner size to match the button text.

 We'll set the spinner to be 20px by 20px and the border to 3px.

 We'll also add a margin-left to the spinner to separate it from the text.

 We'll also make sure the button has the same height when the spinner is shown.

 We'll set the button to have `display: inline-flex` and `align-items: center` to center the spinner.

 We'll update the button classes to include `inline-flex items-center` and set a minimum width for the spinner.

 Alternatively, we can set the button to have `justify-center` and `w-full` in the template, but we'll adjust.

 We'll change the button class in the main CTA to:

   class="... inline-flex items-center justify-center ..."

 And in the footer CTA as well.

 We'll also set the spinner to have `ml-2` (margin-left: 0.5rem) to separate.

 Let's update the buttons.

 We'll also add the spinner animation to the style section.

 We'll add the keyframes and the spinner class in the style section.

 We'll do it in the existing style section.

 We'll also add a transition for the button text and spinner for a smoother appearance.

 We'll add:

   .button-text, .spinner {
     transition: opacity 0.2s ease;
   }

 But we are toggling with hidden, which is display: none. We can use opacity and visibility for a fade effect.

 Alternatively, we can use:

   .button-text.hidden { opacity: 0; visibility: hidden; }
   .spinner.hidden { opacity: 0; visibility: hidden; }

 But we are using the 'hidden' class which sets display: none. We can change to use a custom class for fading.

 However, for simplicity, we'll use the hidden class and rely on the display:none.

 We'll also add a transition to the spinner when it appears? Not necessary because it's a spinner.

 We'll proceed.

 Let's update the HTML and CSS.

 We'll add the spinner animation and the spinner class in the style section.

 We'll also update the buttons in the main and footer.

 We'll also add the id to the footer CTA button.

 We'll also note that the main CTA button already has an id="cta-button", so we'll change the footer one to id="footer-cta-button".

 We'll also update the JavaScript to handle both.

 We'll also note that the main CTA button has a scroll behavior. We'll keep that and add the loading state on top.

 We'll also note that the main CTA button has a scroll to the template section. We'll simulate the loading and then allow the scroll.

 But in the simulation, we are just reverting the button state. The actual scroll will happen after the button is enabled.

 We'll keep the existing scroll behavior.

 We'll update the HTML and the JavaScript.

 Let's do it.


# Loading Animation Button with Tailwind CSS

I'll create a button with a loading animation that triggers on click, using Tailwind CSS and vanilla JavaScript. The design will follow the dark theme aesthetic from the provided template while implementing a clean, modern loading animation.

Generated HTML Page:

Text After HTML:

## Key Features of the Loading Button

1. **Smooth Loading Animation**:
   - Circular spinner with a pulsing background effect
   - Text transitions with fade and slide animations
   - Disabled state during loading to prevent multiple clicks

2. **Modern Design**:
   - Dark theme with orange accent color
   - Clean, minimalist aesthetic
   - Responsive layout that works on all devices

3. **Implementation**:
   - Pure vanilla JavaScript (no dependencies)
   - Tailwind CSS for styling
   - CSS animations for smooth transitions

4. **User Experience**:
   - Clear visual feedback during loading
   - Disabled state prevents multiple submissions
   - Success message after loading completes

The button demonstrates a professional loading state that can be easily integrated into any web application. The design follows modern UI principles with attention to detail in animations and transitions.