# rstacruz/nprogress

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/rstacruz-nprogress).**

26,406 stars · 1,774 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/rstacruz/nprogress
- Homepage: http://ricostacruz.com/nprogress
- awesome-repositories: https://awesome-repositories.com/repository/rstacruz-nprogress.md

## Description

nprogress is a lightweight JavaScript UI component and web progress bar library. It provides a minimalist DOM progress indicator used to track the state of asynchronous operations within a browser document.

The library allows for the visualization of loading states through a thin progress bar and spinner. It supports progress state management, enabling the bar to be started, stopped, or marked as complete, with support for incremental progress tracking and percentage-based updates.

Users can modify the visual style by overriding default CSS or replacing the markup template. The component also supports custom mounting point configuration, allowing the progress bar to be attached to a specific parent container rather than the document body.

## Tags

### User Interface & Experience

- [Progress Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-indicators.md) — Provides a minimalist visual progress indicator for tracking asynchronous operations in the browser.
- [Progress Bar Widgets](https://awesome-repositories.com/f/user-interface-experience/progress-bar-widgets.md) — Provides a configurable loading indicator widget for tracking task completion status.
- [Progress Bars](https://awesome-repositories.com/f/user-interface-experience/progress-bars.md) — Provides a lightweight progress bar library for displaying loading states at the top of web pages.
- [Loading Indicators](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/loading-indicators.md) — Implements slim loading bars at the top of the page to signal that content is being fetched.
- [Progress Update Notifications](https://awesome-repositories.com/f/user-interface-experience/state-update-logic/progress-update-notifications.md) — Provides mechanisms to update the loading bar using percentages or completion signals. ([source](https://github.com/rstacruz/nprogress#readme))
- [Visual Style Customization](https://awesome-repositories.com/f/user-interface-experience/visual-style-customization.md) — Enables modifying the visual style of the progress bar by overriding default CSS or replacing the markup template. ([source](https://github.com/rstacruz/nprogress/blob/master/Readme.md))

### Part of an Awesome List

- [UI Components](https://awesome-repositories.com/f/awesome-lists/devtools/ui-components.md) — Ships as a lightweight JavaScript UI component for displaying loading progress.
- [JavaScript Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/javascript-libraries.md) — Slim progress bar for page loading states.

### Development Tools & Productivity

- [Asynchronous Task Visualization](https://awesome-repositories.com/f/development-tools-productivity/asynchronous-task-processing/asynchronous-task-visualization.md) — Visualizes the status of background processes using a minimalist progress bar to keep users informed.

### Education & Learning Resources

- [Programmatic](https://awesome-repositories.com/f/education-learning-resources/professional-development-platforms/progress-tracking/programmatic.md) — Supports updating the completion percentage or incrementing the bar by fixed amounts to reflect ongoing work. ([source](https://github.com/rstacruz/nprogress/blob/master/Readme.md))

### Software Engineering & Architecture

- [Single Page Applications](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/application-architecture-patterns/single-page-applications.md) — Visualizes transition progress between views in single-page applications to improve perceived performance.

### Web Development

- [Direct DOM Manipulation](https://awesome-repositories.com/f/web-development/direct-dom-manipulation.md) — Directly injects and manipulates HTML elements in the DOM to render the loading indicator.