DEV Community

Jess
Jess

Posted on

Quick and Easy Load Spinner Tutorial for React with Hooks

First, visit loading.io where you can customize a spinner and get the code needed to create it.

Next, create a LoadSpinner component in your React project.

    project-folder
    |_src
        |_LoadSpinner
            |_LoadSpinner.js
            |_LoadSpinner.css
        |_App.js
        ...
Enter fullscreen mode Exit fullscreen mode

Create a functional component in LoadSpinner.js. It doesn't need to take in any props. Then paste in the HTML for the spinner. Don't forget to import your css as well.

import React from 'react';
import './LoadSpinner.css';

const LoadSpinner = () => (
  <div className="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
);

export default LoadSpinner;

Enter fullscreen mode Exit fullscreen mode

Next, paste the css code inside LoadSpinner.css

.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #cef;
}

/* 
    ... there are A LOT more classes I'm leaving off for the sake of space
*/
Enter fullscreen mode Exit fullscreen mode

Now you can use state to control whether or not the spinner is displayed. For this example, I'm going to create a button to toggle between a visible and hidden spinner.

import React, { useState } from 'react';
import './App.css';
import LoadSpinner from './LoadSpinner/LoadSpinner';


function App() {
  const [isLoaded, setIsLoaded] = useState(true);

  const handleIsLoadedToggle = () => {
    setIsLoaded(currentIsLoaded => !currentIsLoaded)
  };

  return (
    <div className="App">
      <button onClick={handleIsLoadedToggle}>
        Toggle LoadSpinner
      </button>

      {isLoaded && <LoadSpinner />}
    </div>
  );
}

export default App;

Enter fullscreen mode Exit fullscreen mode

In this example, I'm simply displaying a button that says "Toggle LoadSpinner". When the button is clicked, handleIsLoadedToggle runs and isLoaded is set in state to whatever the opposite of it's current state is.

Down in the return statement, the LoadSpinner component is displayed if isLoaded is true.

If you don't want to use hooks, you can just add isLoaded to the state of your class component.

class App extends React.Component {
  state = {
    isLoaded: true
  }

  handleIsLoadedToggle = () => {
    this.setState(prevState => ({
      isLoaded: !prevState.isLoaded
    }))
  };

  render() {
    return (
      <div className="App" >
        <button onClick={this.handleIsLoadedToggle}>Toggle LoadSpinner</button>
        { this.state.isLoaded && <LoadSpinner />}
      </div >
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Check out the code here.

Discussion (1)

Collapse
callum09 profile image
Callum Oberholzer

Hi Jess, thanks for the tutorial. I'm building some buttons for my component library, and am trying to allow the button to still trigger it's primary function while changing the state. IE activate loading state and then navigate to the href. Any thoughts? Currently thinking of persuing a similar methodoly used here (preventing default, doing work, and then triggering default once work is complete), but without jquery:
stackoverflow.com/questions/761087...