React.js react-loader-spinner Example to Add Async Loading Spinner Animation in Javascript

Welcome folks today in this blog post we will be showing loading spinners using the react-loader-spinner library in react.js. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js app as shown below

npx create-react-app sampleapp

cd sampleapp

And after that you need to install the below libraries using the below command as shown below

npm i react-loader-spinner

And after that you need to see the directory structure of the react.js app as shown below

And now you need to copy paste the below code inside the App.js file as shown below

App.js

import React from "react";
import { Audio } from "react-loader-spinner";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Audio
        height="80"
        width="80"
        radius="9"
        color="green"
        ariaLabel="loading"
        wrapperStyle
        wrapperClass
      />
    </div>
  );
}

import React from "react";

import { Audio } from "react-loader-spinner";

import "./styles.css";

export default function App() {

return (

<Audio

height="80"

width="80"

radius="9"

color="green"

ariaLabel="loading"

wrapperStyle

wrapperClass

</div>

);

}

As you can see in the above code we are importing the react-loader-spinner library and then we are rendering the audio widget and inside it we are passing the width and height and also we are attaching the radius as shown below