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.

ngprogress

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.

Conclusion:

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.