Thursday, October 9, 2025
HomeLanguagesHow to Add Spinner Loader in Next.js ?

How to Add Spinner Loader in Next.js ?

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 - neveropen</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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
Dominic
Dominichttp://wardslaus.com
infosec,malicious & dos attacks generator, boot rom exploit philanthropist , wild hacker , game developer,
RELATED ARTICLES

Most Popular

Dominic
32346 POSTS0 COMMENTS
Milvus
87 POSTS0 COMMENTS
Nango Kala
6715 POSTS0 COMMENTS
Nicole Veronica
11877 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11940 POSTS0 COMMENTS
Shaida Kate Naidoo
6835 POSTS0 COMMENTS
Ted Musemwa
7094 POSTS0 COMMENTS
Thapelo Manthata
6789 POSTS0 COMMENTS
Umr Jansen
6791 POSTS0 COMMENTS