NProgress: a nanoscopic progress bar like on Medium and YouTube

jQuery

Everyone has probably noticed the slim progress bar on Medium and YouTube, which is a UI element placed below the browser’s address bar.

NProgress jQuery plugin example The main reason to have this kind of progress bar is because the content on the page is switched by JavaScript and the native browser’s loading indicator may not work. In this case, users may think that the web page is stuck and not fetching any content.

NProgress.js is a jQuery plugin, which can be used anywhere [Demo][GitHub].

The way you use it is very simple. There are two methods: start() and done() which you may tie to ajaxStart and ajaxComplete.

NProgress.start(); // shows the progress bar
NProgress.done(); // completes the progress

There are also some advanced features:

NProgress.set(0.2); // sets a percentage
NProgress.inc(); // increments by a little
NProgress.configure({ ease: 'ease', speed: 700 }); // adjust the animation by using `ease` and `speed` (in ms)
NProgress.configure({ trickleRate: 0.04, trickleSpeed: 700 });

Also, you should try ngProgress if you are an AngularJS fan.

Comments

    3,751

    Ropes — Fast Strings

    Most of us work with strings one way or another. There’s no way to avoid them — when writing code, you’re doomed to concatinate strings every day, split them into parts and access certain characters by index. We are used to the fact that strings are fixed-length arrays of characters, which leads to certain limitations when working with them. For instance, we cannot quickly concatenate two strings. To do this, we will at first need to allocate the required amount of memory, and then copy there the data from the concatenated strings.