How to Add Spinner Loader in Next.js ?
Last Updated :
05 Jan, 2023
In this article, we are going to learn how we can add spinner loader in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac.
Approach: To add our spinner loader we are going to use the react-loader-spinner package. The react-loader-spinner package helps us to integrate spinner loader in our app. So first, we will install the react-loader-spinner package and then we will add a spinner loader on our homepage.
Create NextJS Application: You can create a new NextJs project using the below command:
npx create-next-app gfg
Install the required package: Now we will install the react-loader-spinner package using the below command:
npm i react-loader-spinner
Project Structure: It will look like this.
Adding the Spinner Loader: After installing the package we can easily add a spinner loader on any page in our app. For this example, we are going to add a loader to our homepage.
index.js
import React from 'react' ;
import Loader from "react-loader-spinner" ;
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css" ;
export default function SpinnerLoading(){
return (
<div>
<h2>NextJs Spinner Loader - GeeksforGeeks</h2>
<Loader
type= "Puff"
color= "#00BFFF"
height={100}
width={100}
timeout={3000}
/>
</div>
)
}
|
Explanation: In the above example first, we are importing the Loader component and after that, we are using the Loader component in a new function to add our Spinner loader. Also setting color, height, weight, and timeout in the Loader component.
Steps to run the application: Run the below command in the terminal to run the app.
npm run dev
Output:
Share your thoughts in the comments
Please Login to comment...