How to Add Spinner Loader in Next.js ?
Last Updated :
31 Jul, 2024
In web applications, providing a smooth and responsive user experience is very important. One way to achieve this is by adding a spinner loader to indicate that a process is ongoing, such as fetching data or loading a new page. In this article, we'll explore how to add a spinner loader in a Next.js application.
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 the 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.
Steps to Add Spinner Loader in Next.js
Step 1: Create a next.js application.
npx create-next-app gfg
Step 2: Install the required package
Now we will install the react-loader-spinner package using the below command:
npm i react-loader-spinner
Project Structure

Dependencies
dependencies
{
"react": "^18",
"react-dom": "^18",
"react-loader-spinner": "^6.1.6",
"next": "14.2.4"
}
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:
Similar Reads
How to add Slider in Next.js ? Adding a slider in Next.js involves integrating a slider component, like react-range, managing its state using React hooks and applying styles for customization, enhancing user interaction and input precision in your application.ApproachTo add our Slider we are going to use the react-range package.
2 min read
How to add Timer in Next.js ? In this article, we are going to learn how we can add Timer 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. The linking of dynamic paths helps in rendering your NextJS components conditionally.
2 min read
How to add Loading Quotes in Next.js ? In this article, we are going to learn how we can add loading quotes 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. The linking of dynamic paths helps in rendering your NextJS components condi
2 min read
How to add Skeleton Loading in NextJS ? Skeleton Loading in Next.js provides a placeholder UI while content is loading, improving perceived performance and user experience. It visually represents loading elements, ensuring a smoother, more engaging application.ApproachTo add skeleton loading in nextjs application we are going to use the r
2 min read
How to Add Simple DatePicker in Next.js ? In this article, we are going to learn how we can add a Simple Datepicker 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. The linking of dynamic paths helps in rendering your NextJS components
2 min read