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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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> ); } |
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