React Js Loading Spinner Button

React Js Loading Spinner Button:A React.js loading spinner button is a user interface element that combines a button with a loading spinner to provide visual feedback during asynchronous actions. When a user triggers an operation like submitting a form or making an API request, the button temporarily disables and displays a spinner icon. This prevents duplicate submissions and communicates to the user that the action is in progress. React.js, a popular JavaScript library, facilitates this functionality by managing component states and transitions. Developers can easily create such buttons for a smoother and more responsive user experience in web applications.

written

reviewed

updated

How to create a loading spinner button in Reactjs?

This React.js code defines a Loading Spinner Button component. It consists of a button element that can display a loading spinner when clicked. The component takes three props: onClick for the button's click event handler, isLoading to control the loading state, and text for the button's label.

Inside the component, a loader div is conditionally rendered when isLoading is true, providing a visual loading indicator. When the button is clicked, it triggers the handleClick function, simulating an async operation for 5 seconds. During this time, the button is disabled and displays the loading spinner. After completion, it returns to the normal state.

React Js Loading Spinner Button Example

  <script type="text/babel">
    const { useState, useEffect } = React;
    function App() {
      const LoadingButton = ({ onClick, isLoading, text }) => {
        return (
          <button className="loading-button" onClick={onClick} disabled={isLoading}>
            {isLoading ? <div className="loader"></div> : text}
          </button>
        );
      };
      const [isLoading, setIsLoading] = useState(false);

      const handleClick = () => {
        setIsLoading(true);

        // Simulate an API request or any async operation
        setTimeout(() => {
          setIsLoading(false);
        }, 5000);
      };

      return (
        <div className='container'>
          <h3>React js Loading Spinner Button Example</h3>
          <LoadingButton
            onClick={handleClick}
            isLoading={isLoading}
            text="Submit Form"
          />
        </div>
      );
    }

    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

 
  <script type="text/babel">
    const { useState, useEffect } = React;
    function App() {
      const LoadingButton = ({ onClick, isLoading, text }) => {
        return (
          <button className="loading-button" onClick={onClick} disabled={isLoading}>
            {isLoading ? <div className="loader"></div> : text}
          </button>
        );
      };
      const [isLoading, setIsLoading] = useState(false);
​
      const handleClick = () => {
        setIsLoading(true);
​
        // Simulate an API request or any async operation
        setTimeout(() => {
          setIsLoading(false);
        }, 5000);
      };
​
      return (
        <div className='container'>
          <h3>React js Loading Spinner Button Example</h3>
          <LoadingButton
            onClick={handleClick}
            isLoading={isLoading}
            text="Submit Form"
          />
        </div>
      );
    }
​
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

Output of React Js Loading Spinner Button

Before Click Button

Pasted Image

After Click Button

Pasted Image

React JS Tutorial

React Js Loading Spinner Button

Feedback for Abhishek

How to create a loading spinner button in Reactjs?

React Js Loading Spinner Button Example

Output of React Js Loading Spinner Button