React JS Loading Spinner Example Tutorial

In this tutorial, you will learn how to create loading a spinner in React JS application using Bootstrap spinner.

How to Implement Loading Spinner Button in React JS

Steps to implement loading spinner:

Step 1 – Create React App

Run the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, run the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Bootstrap Spinner Package

Run the following command to install boostrap spinner library into your react app:

npm install bootstrap --save
npm install react-bootstrap bootstrap

Add bootstrap.min.css file in src/App.js file:

import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Spinner } from 'react-bootstrap'

Step 3 – Add Component in App.js

In this step, you need to add the following code into src/App.js file:

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Spinner } from 'react-bootstrap'
class App extends React.Component{
render(){
return(
<div>
<Button variant="dark" disabled>
<Spinner
as="span"
variant="light"
size="sm"
role="status"
aria-hidden="true"
animation="border"/>
Loading...
</Button>
</div>
)
}

}
export default App;

To modify the spinner animation type and display different types of animated Spinner in React app using React-bootstrap.

import React from 'react'
import { Button, Spinner } from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends React.Component{
render(){
return(
<div>
<Button variant="primary" disabled>
<Spinner
as="span"
variant="warning"
size="sm"
role="status"
aria-hidden="true"
animation="grow"/>
Loading...
</Button>
</div>
)
}

}
export default App;

If you want to customize react loading button. So, you can visit this link spinner component. And find more options for react loading spinner.

Conclusion

In this tutorial, you have learned how to implement a bootstrap button loading spinner in react js app.

Recommended React JS Posts

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *