PHPackages                             gaomingcode/nprogress - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. gaomingcode/nprogress

ActiveLibrary

gaomingcode/nprogress
=====================

For slim progress bars like on YouTube, Medium, etc.

1.0.0(4y ago)034MITJavaScript

Since Jun 3Pushed 4y agoCompare

[ Source](https://github.com/gaomingcode/nprogress)[ Packagist](https://packagist.org/packages/gaomingcode/nprogress)[ Docs](http://ricostacruz.com/nprogress)[ RSS](/packages/gaomingcode-nprogress/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

NProgress
=========

[](#nprogress)

[![GitHub Version](https://camo.githubusercontent.com/c7b8b2e446b612e6bae4c8a7ec76dab52bf3faa1dc31fe6e7010a20b136dcd55/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f67616f6d696e67636f64652f6e70726f67726573732e737667)](https://github.com/gaomingcode/nprogress)[![Packagist Downloads](https://camo.githubusercontent.com/28610515228847c09652984882628716098f67f585a9a645e8098a8fe3ef6dba/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f67616f6d696e67636f64652f6e70726f6772657373)](https://github.com/gaomingcode/nprogress)[![Github License](https://camo.githubusercontent.com/f7e61dcfa434ba66bd50d9c19ceaee82c0328148d375778a8913e46ff8b3820e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f67616f6d696e67636f64652f6e70726f6772657373)](https://github.com/gaomingcode/nprogress)

Installation
------------

[](#installation)

### Composer

[](#composer)

```
composer require gaomingcode/nprogress

```

ReadMe from Origin
------------------

[](#readme-from-origin)

[![Status](https://camo.githubusercontent.com/e059c09e823b54bfd0db751aca7021eb3725674d0d0b3dd868041ca7a7efd26e/68747470733a2f2f6170692e7472617669732d63692e6f72672f727374616372757a2f6e70726f67726573732e7376673f6272616e63683d6d6173746572)](http://travis-ci.org/rstacruz/nprogress)[![npm version](https://camo.githubusercontent.com/bb6fd3099f8c94d21a5fe074532f28a7482fce247773d4951e9ac4d09b7a77f3/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6e70726f67726573732e706e67)](https://npmjs.org/package/nprogress "View this project on npm")[![jsDelivr Hits](https://camo.githubusercontent.com/b00842c0b8528c404d5dd740bf67fb28d4958af74370d00268dc3f7156be5691/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f6e706d2f6e70726f67726573732f62616467653f7374796c653d726f756e646564)](https://www.jsdelivr.com/package/npm/nprogress)

> Minimalist progress bar

Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium.

Installation
------------

[](#installation-1)

Add [nprogress.js](http://ricostacruz.com/nprogress/nprogress.js) and [nprogress.css](http://ricostacruz.com/nprogress/nprogress.css) to your project.

```

```

NProgress is available via [bower](http://bower.io/search/?q=nprogress) and [npm](https://www.npmjs.org/package/nprogress).

```
$ npm install --save nprogress

```

Also available via [unpkg](https://unpkg.com/) CDN:

-
-

Basic usage
-----------

[](#basic-usage)

Simply call `start()` and `done()` to control the progress bar.

```
NProgress.start();
NProgress.done();
```

### Turbolinks (version 5+)

[](#turbolinks-version-5)

Ensure you're using Turbolinks 5+, and use this: (explained [here](https://github.com/rstacruz/nprogress/issues/8#issuecomment-239107109))

```
$(document).on('turbolinks:click', function() {
  NProgress.start();
});
$(document).on('turbolinks:render', function() {
  NProgress.done();
  NProgress.remove();
});
```

### Turbolinks (version 3 and below)

[](#turbolinks-version-3-and-below)

Ensure you're using Turbolinks 1.3.0+, and use this: (explained [here](https://github.com/rstacruz/nprogress/issues/8#issuecomment-23010560))

```
$(document).on('page:fetch',   function() { NProgress.start(); });
$(document).on('page:change',  function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });
```

### Pjax

[](#pjax)

Try this: (explained [here](https://github.com/rstacruz/nprogress/issues/22#issuecomment-36540472))

```
$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end',   function() { NProgress.done();  });
```

Ideas
-----

[](#ideas)

- Add progress to your Ajax calls! Bind it to the jQuery `ajaxStart` and `ajaxStop` events.
- Make a fancy loading bar even without Turbolinks/Pjax! Bind it to `$(document).ready` and `$(window).load`.

Advanced usage
--------------

[](#advanced-usage)

**Percentages:** To set a progress percentage, call `.set(n)`, where *n* is a number between `0..1`.

```
NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()
```

**Incrementing:** To increment the progress bar, just use `.inc()`. This increments it with a random amount. This will never get to 100%: use it for every image load (or similar).

```
NProgress.inc();
```

If you want to increment by a specific value, you can pass that as a parameter:

```
NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994
```

**Force-done:** By passing `true` to `done()`, it will show the progress bar even if it's not being shown. (The default behavior is that *.done()* will not do anything if *.start()* isn't called)

```
NProgress.done(true);
```

**Get the status value:** To get the status value, use `.status`

Configuration
-------------

[](#configuration)

#### `minimum`

[](#minimum)

Changes the minimum percentage used upon starting. (default: `0.08`)

```
NProgress.configure({ minimum: 0.1 });
```

#### `template`

[](#template)

You can change the markup using `template`. To keep the progress bar working, keep an element with `role='bar'` in there. See the [default template](https://github.com/rstacruz/nprogress/blob/master/nprogress.js#L31)for reference.

```
NProgress.configure({
  template: "..."
});
```

#### `easing` and `speed`

[](#easing-and-speed)

Adjust animation settings using *easing* (a CSS easing string) and *speed* (in ms). (default: `ease` and `200`)

```
NProgress.configure({ easing: 'ease', speed: 500 });
```

#### `trickle`

[](#trickle)

Turn off the automatic incrementing behavior by setting this to `false`. (default: `true`)

```
NProgress.configure({ trickle: false });
```

#### `trickleSpeed`

[](#tricklespeed)

Adjust how often to trickle/increment, in ms.

```
NProgress.configure({ trickleSpeed: 200 });
```

#### `showSpinner`

[](#showspinner)

Turn off loading spinner by setting it to false. (default: `true`)

```
NProgress.configure({ showSpinner: false });
```

#### `parent`

[](#parent)

specify this to change the parent container. (default: `body`)

```
NProgress.configure({ parent: '#container' });
```

Customization
-------------

[](#customization)

Just edit `nprogress.css` to your liking. Tip: you probably only want to find and replace occurrences of `#29d`.

The included CSS file is pretty minimal... in fact, feel free to scrap it and make your own!

Resources
---------

[](#resources)

- [New UI Pattern: Website Loading Bars](http://www.usabilitypost.com/2013/08/19/new-ui-pattern-website-loading-bars/) (usabilitypost.com)

Support
-------

[](#support)

**Bugs and requests**: submit them through the project's issues tracker.
[![Issues](https://camo.githubusercontent.com/60d9d418a50feb18f83005e5bf959b2b9697f1d566e629a2c94142e2d0735597/687474703a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f727374616372757a2f6e70726f67726573732e737667)](https://github.com/rstacruz/nprogress/issues)

**Questions**: ask them at StackOverflow with the tag *nprogress*.
[![StackOverflow](https://camo.githubusercontent.com/bce340657af20cd542ec9db5bd41eea31ef1157e5f7c1874e2ee4317de379643/687474703a2f2f696d672e736869656c64732e696f2f62616467652f737461636b6f766572666c6f772d6e70726f67726573732d627269676874677265656e2e737667)](http://stackoverflow.com/questions/tagged/nprogress)

**Chat**: join us at gitter.im.
[![Chat](https://camo.githubusercontent.com/43f397963da09fc5232a7f1a0793f9fab8851b0b8b94e1eb05f98bbea92fc158/687474703a2f2f696d672e736869656c64732e696f2f62616467652f6769747465722d727374616372757a2f6e70726f67726573732d627269676874677265656e2e737667)](https://gitter.im/rstacruz/nprogress)

Thanks
------

[](#thanks)

**NProgress** © 2013-2017, Rico Sta. Cruz. Released under the [MIT License](http://mit-license.org/).
Authored and maintained by Rico Sta. Cruz with help from [contributors](http://github.com/rstacruz/nprogress/contributors).

> [ricostacruz.com](http://ricostacruz.com) · GitHub [@rstacruz](https://github.com/rstacruz) · Twitter [@rstacruz](https://twitter.com/rstacruz)

[![](https://camo.githubusercontent.com/4a8b6a129bb4d7341eae2bef415da63bb1ea05fb84d8cc94b16d854e226a4110/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f6c6c6f776572732f727374616372757a2e7376673f7374796c653d736f6369616c266c6162656c3d40727374616372757a)](https://github.com/rstacruz) [![](https://camo.githubusercontent.com/ed5aef8e23c40f0021f722d0d4e09da3917d06982ae20e0d70c7d5d1eac9808f/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f727374616372757a2e7376673f7374796c653d736f6369616c266c6162656c3d40727374616372757a)](https://twitter.com/rstacruz)

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community19

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 81% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1810d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/4b333bd44a2f7f526cc29a59b2945b27c7d2f31df68b92c2eb46efbddc032483?d=identicon)[gaomingcode](/maintainers/gaomingcode)

---

Top Contributors

[![rstacruz](https://avatars.githubusercontent.com/u/74385?v=4)](https://github.com/rstacruz "rstacruz (171 commits)")[![gaomingcode](https://avatars.githubusercontent.com/u/53959161?v=4)](https://github.com/gaomingcode "gaomingcode (7 commits)")[![rferri](https://avatars.githubusercontent.com/u/1243101?v=4)](https://github.com/rferri "rferri (3 commits)")[![lipis](https://avatars.githubusercontent.com/u/125676?v=4)](https://github.com/lipis "lipis (3 commits)")[![tybro0103](https://avatars.githubusercontent.com/u/118297?v=4)](https://github.com/tybro0103 "tybro0103 (2 commits)")[![EisenbergEffect](https://avatars.githubusercontent.com/u/131485?v=4)](https://github.com/EisenbergEffect "EisenbergEffect (1 commits)")[![FND](https://avatars.githubusercontent.com/u/3515?v=4)](https://github.com/FND "FND (1 commits)")[![hbu50](https://avatars.githubusercontent.com/u/1133426?v=4)](https://github.com/hbu50 "hbu50 (1 commits)")[![infertux](https://avatars.githubusercontent.com/u/345702?v=4)](https://github.com/infertux "infertux (1 commits)")[![jeffehobbs](https://avatars.githubusercontent.com/u/466625?v=4)](https://github.com/jeffehobbs "jeffehobbs (1 commits)")[![jgillich](https://avatars.githubusercontent.com/u/347965?v=4)](https://github.com/jgillich "jgillich (1 commits)")[![jonjaques](https://avatars.githubusercontent.com/u/637410?v=4)](https://github.com/jonjaques "jonjaques (1 commits)")[![lacivert](https://avatars.githubusercontent.com/u/945612?v=4)](https://github.com/lacivert "lacivert (1 commits)")[![LukasDrgon](https://avatars.githubusercontent.com/u/15611832?v=4)](https://github.com/LukasDrgon "LukasDrgon (1 commits)")[![markbao](https://avatars.githubusercontent.com/u/27594?v=4)](https://github.com/markbao "markbao (1 commits)")[![martinratinaud](https://avatars.githubusercontent.com/u/4191809?v=4)](https://github.com/martinratinaud "martinratinaud (1 commits)")[![Mithgol](https://avatars.githubusercontent.com/u/1088720?v=4)](https://github.com/Mithgol "Mithgol (1 commits)")[![notslang](https://avatars.githubusercontent.com/u/1049204?v=4)](https://github.com/notslang "notslang (1 commits)")[![rahulcs](https://avatars.githubusercontent.com/u/624925?v=4)](https://github.com/rahulcs "rahulcs (1 commits)")[![rictorres](https://avatars.githubusercontent.com/u/351568?v=4)](https://github.com/rictorres "rictorres (1 commits)")

---

Tags

progressbarspinnernprogress

### Embed Badge

![Health badge](/badges/gaomingcode-nprogress/health.svg)

```
[![Health](https://phpackages.com/badges/gaomingcode-nprogress/health.svg)](https://phpackages.com/packages/gaomingcode-nprogress)
```

###  Alternatives

[kartik-v/bootstrap-fileinput

An enhanced HTML 5 file input for Bootstrap 5.x, 4.x, and 3.x with features for file preview for many file types, multiple selection, ajax uploads, and more.

5.4k7.9M13](/packages/kartik-v-bootstrap-fileinput)[mtownsend/progress

A PHP package to determine steps and progress.

22116.2k](/packages/mtownsend-progress)[kartik-v/yii2-widget-spinner

A widget to render animated CSS3 loading spinners with VML fallback for IE (sub repo split from yii2-widgets)

283.9M3](/packages/kartik-v-yii2-widget-spinner)[akaunting/laravel-apexcharts

ApexCharts package for Laravel

84288.3k2](/packages/akaunting-laravel-apexcharts)[alecrabbit/php-console-spinner

Extremely flexible spinner for \[async\] php cli applications

24032.0k2](/packages/alecrabbit-php-console-spinner)[kartik-v/yii2-widget-touchspin

A Yii2 wrapper widget for the Bootstrap Switch plugin to use checkboxes & radios as toggle touchspines (sub repo split from yii2-widgets)

184.1M6](/packages/kartik-v-yii2-widget-touchspin)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)