--- title: "How to build a progress bar indicator in Next.js" url: https://daily.dev/posts/how-to-build-a-progress-bar-indicator-in-next-js--hgwpvtj1 source_url: https://blog.logrocket.com/how-to-build-a-progress-bar-indicator-in-next-js/ type: article source: "LogRocket" published: 2022-09-16T16:06:53.489Z updated: 2022-09-16T16:06:53.488Z tags: ["react"] reading_time: 10 upvotes: 21 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How to build a progress bar indicator in Next.js **[LogRocket](https://daily.dev/sources/logrocket)** · 10 min read · 21 upvotes · 0 comments ## Summary Next.js takes a little bit of time to route between pages, especially to server-side rendered pages as these are rendered on request. This tutorial will address this issue by demonstrating how to showcase the progress indicator when we route to the Characters page. To finish setting up, run the following command in your terminal to install two third-party libraries, NProgress and React Spinners, that we’ll be using later in this tutorial. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 0 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/how-to-build-a-progress-bar-indicator-in-next-js--hgwpvtj1)