In react, **animated spinners** are often used to make web-pages more attractive. The steps are:

1. Install the package using the command prompt.
``` javascript
npm install react-bootstrap bootstrap
```

2. Import spinner module from the above package.
``` javaScript
import { Spinner } from 'react-bootstrap';
```

3. Use the `<Spinner>` tag for the spinner -- you can apply CSS styles to it.




> Remember to use the latest version of react and react-bootstrap.

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


import React from 'react';

import { Spinner } from 'react-bootstrap';

export default class App extends React.Component {
  
  state = {
     loading : false
  }

  setLoading=()=>{
    this.setState({ loading: true})
  }
  
  render() {
    return (

    <div style={{ marginTop : '60px' }}>
      <link
        rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous"
      />
      <button className="button" onClick={this.setLoading}>
      Click to see spinner
      {this.state.loading && <Spinner animation="border" role="status">
        </Spinner>}
         
      </button>
      </div>
      
    );
  }
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

Typescript React

How to create a loading spinner in React

Install React Bootstrap, import Spinner, apply CSS styles, and use the latest package versions.

How to create a loading spinner in React

Code