React Bootstrap Loading Button Example

Bootstrap , React.js

Nicesnippets

3406

18-04-2020


Hello Dev,

React bootstrap default provide spinner loading button. when you submit form at that time button is disable and do some animation on button using bootstap. you can also do blink animation. for form create loading component.

Bootstrap offers two animation styles for spinners one is border and second is grow. The animation style can be configured with the animation property. An animation style must always be provided when creating a spinner.

src/BootstrapLoadingButton.js

import React from 'react'

import { Button,Spinner } from 'react-bootstrap'

class BootstrapLoadingButton extends React.Component{

render(){

return(

<div>

<Button variant="success" disabled>

<Spinner

as="span"

animation="border"

size="sm"

role="status"

aria-hidden="true"

/>

<span className="sr-only">Loading...</span>

</Button>{' '}

<Button variant="success" disabled>

<Spinner

as="span"

animation="grow"

size="sm"

role="status"

aria-hidden="true"

/>

Loading...

</Button>

</div>

)

}

}

export default BootstrapLoadingButton;

I hope it can help you...