Angular Loading Bar – Create YouTube Like Progress Line

ngProgress is awesome way to show progress bar of loading page using angularjs. You have seen progress bar on header of YouTube, that was a thin line attached with header of YouTube, that show status of progress of video loading page.You can implement these type loading bars on your website using ngProgress.

here i will discuss how to use ngProgress in angular application, Internally its using jquery plugin but it’s not needed jQuery as a dependency.


You can also check other tutorial of angular,

Simple Example of Angular Loading Bar

Step 1: Download file from ngProgress Website.

Step 2: Include all dependency files into header of your index.html file.

Step 3: Inject ngProgressFactory as a dependency on your angularjs module.

Here i am having 'ngApp' angularjs application name,You need to change/replace as per your angularjs application name.

Step 4:After inject module in angularjs application,You need to call ngProgressFactory methods in your controller.


We have learn in this angularjs tutorial about integration of loading bar with angularjs application.You can use this loading bar for page loading bar,angilarjs loading directive,content progress bar etc.