10+ Angular 2 Progress Bars

How cool are progress bars, seriously they are awesome. Here are some Angular 2 Progress Bars that you can use with your Angular2 JS web application. Your angular 2 progress bar could load at the top of the screen “YouTube style” with that cool real-time zoom effect. Most of them work with Bootstrap and fit easily into your Angular application in the form of a module or directive.

Some of them have prerequisites/packages you must install to use them, and you can get those from NPM scrips (Node.js). As the final version of Angular 2 was released in September 2016 I would highly recommend using the progress bars that are coded in TypeScript so you can utilise the full power of ng2 (especially class definition object, ES6 and JavaScript variables).

For Angular 1 Progress Bars see here: http://www.angularjs4u.com/loading/5-angularjs-loadingprogress-bar-options/

1. Angular 2 Progress Bar

Angular 2 Progress Bar
Angular 2 Progress Bar

Demo

2. ANGULAR 2 PROGRESS BAR + TypeScript

ANGULAR 2 PROGRESS BAR + TypeScript
ANGULAR 2 PROGRESS BAR + TypeScript

Demo

3. Angular 2 Progressbar

angular-2-progressbar
Angular 2 Progressbar

Demo

4. Angular 2 Material Progress-bar

Angular 2 Material Progress-bar
Angular 2 Material Progress-bar

NPM

5. Angular 2 Slim Loading Bar

Angular 2 Slim Loading Bar
Angular 2 Slim Loading Bar

Inspired by http://victorbjelkholm.github.io/ngProgress/

Github Demo

6. Simple Progress Bar Angular2 applications using bootstrap3.

Simple Progress Bar Angular2 applications using bootstrap3
Simple Progress Bar Angular2 applications using bootstrap3

Github

7. Angular 2 Progress Bar Example

Angular 2 Progress Bar Example
Angular 2 Progress Bar Example

Demo

8. AngularJS – Loading progress bar, HTML5 video player, and ngClass

2 more to come…. please leave a comment and suggest one?

Sam is a passionate web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and reading.

Leave a Reply

Your email address will not be published. Required fields are marked *