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
...
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;
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
*/
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;
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 >
);
}
}
Check out the code here.
Top comments (1)
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...