How to create loading spinner with react js

Question

How can I create i simple spinner using react js?

Let say that I have code like this :

 let cars = [
      {id: 1, name: "Golf"},
      {id: 2, name: "Audi"},
      {id: 3, name: "Passat"},
      {id: 4, name: "Bmw"}
    ];

class Test extends React.Component {
        constructor(props){
        super(props);

      this.state = {
        loading: true
      }
    }

    componentDidMount(){
        this.setState({loading: false})
    }

        render(){
        let content = this.state.loading ? <div>Loading</div> : cars.map((c, i) => <div key={i}>{c.name}</div>)

        return (
        <div>{content}</div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

And I'm trying to show loading while the list of cars isn't loaded.

Here is fiddle

Any idea?

Put in a spinner image instead of the text "loading"?

Dave Newton
– Dave Newton

2016-11-21 16:05:57 +00:00
Commented Nov 21, 2016 at 16:05 — Dave Newton
– Dave Newton, Commented Nov 21, 2016 at 16:05

The Reason · Accepted Answer · 2016-11-21 16:18:36Z

5

You can use setTimeout to simulate async request

componentDidMount(){
    setTimeout(() => { 
      this.setState({loading: false})
    },2000)
} // simulate loading

Worked Fiddle

Thanks

edited Nov 21, 2016 at 16:18

answered Nov 21, 2016 at 16:07

The Reason

8,0135 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel · Accepted Answer · 2018-11-27 20:07:07Z

Reactjs is all about a concept called components. So what is a React component?

A React component is a function or a class.

The purpose of a component which is a class or a function is to produce html that we are going to show to the user. Its secondary purpose is to handle feedback from the user. For example, anytime a user clicks or drags or types input, any of those types of events.

Anytime we have content that we need to show the user, we are going to write some amount of jsx. JSX is that code that kind of looks like html. In order to handle feedback from the users, we are going to use these software routines called event handlers.

So when you are looking to add a spinner to your Reactjs application, what do you do? You create a spinner component and you can do so by creating a file called Spinner.js and the code inside would look something like this:

import React from 'react';

const Spinner = () => {
  return (
    <div className="ui active dimmer">
      <div className="ui big text loader">Loading...</div>
    </div>
  );
};

export default Spinner;

In the above example I am using some classNames taken from Semantic-UI, feel free to check out their documentation. You can then add this Spinner component as a component instance to your Test component like so:

import React from 'react';
import ReactDOM from 'react-dom';
import Spinner from './Spinner';

class Test extends React.Component {
        constructor(props){
        super(props);

  this.state = {
    loading: true
  }
}

componentDidMount(){
    this.setState({loading: false})
}

    render(){
    let content = this.state.loading ? <Spinner /> : cars.map((c, i) => <div key={i}>{c.name}</div>)

    return (
    <div>{content}</div>
  )
}

}

And that is how you create a simple spinner in Reactjs.

dilipkumar katre · Accepted Answer · 2020-06-30 12:59:22Z

0

with very short code I could generate wait spinner in react component

getSpinner:function(){
 return ( this.state.loadingTree?
    <div><img style={{width: '90px', objectFit: 'scale-down', 
     position:'absolute',opacity:'0.95', align: 'middle' }} src= 
    {"/images/spinner.gif"}/></div>:""
 );
},

render(){
   return(){
    <div style={{position:'absolute', top:'40%',left:'50%'}}>{this.getSpinner()} 
   </div>};   }

answered Jun 30, 2020 at 12:59

dilipkumar katre

1821 silver badge13 bronze badges

Collectives™ on Stack Overflow

How to create loading spinner with react js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related