Introduction
In this blog post, we are going to create create top loading bar in next js website.It is very easy to create.
Top loading bar is necessary in every website. You have seen in many website like facebook, youtube & instagram etc. that, when you click on any post or a video, on the top of navbar of web page a small progress bar is displayed & when content is loaded it get hidden automatically. For example,
Project setup
So lets get started ! First create a new nextjs project by following command:
npx create-next-app@latest
After that
Installing Depencies
// for nodejs
npm install nextjs-toploader
// for yarn
yarn add nextjs-toploader
Creating Top loading bar
import React from 'react'
import {Poppins} from "next/font/google"
const popins= Poppins({
subsets:["latin"],
weight:['100','200', '300', '400','500','600','700','800','900']
})
export default function Header(props) {
return (
<div> <h2 className={` ${popins.className} my-2 text-black dark:text-white font-bold text-xl`}>{props.content}</h2></div>
)
}