React Bootstrap Loading Button Example

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;