CODEWITHSUNDEEP
javascriptreactjs
Boky
Boky

Reputation: 12064

How to create loading spinner with react js

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?

Upvotes: 1

Views: 14113

Answers (3)

dilipkumar katre
dilipkumar katre

Reputation: 166

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>};   }

Upvotes: 0

Daniel
Daniel

Reputation: 15413

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.

Upvotes: 3

The Reason
The Reason

Reputation: 7973

You can use setTimeout to simulate async request

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

Worked Fiddle

Thanks

Upvotes: 5

Related Questions