feat(progresbar): add animation support

- Add support for animation via `.progress-animated` class

Closes ng-bootstrap#292

Author: wesleycho

Diff for: src/progressbar/progressbar.spec.ts

@@ -120,6 +120,30 @@ describe('ng-progressbar', () => {
          });
        })));
 
+    it('accepts animated as boolean attr', async(inject([TestComponentBuilder], (tcb) => {
+         const html = '<ngb-progressbar [value]="value" animated></ngb-progressbar>';
+
+         tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
+           fixture.detectChanges();
+
+           expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('progress-animated');
+         });
+       })));
+
+    it('accepts animated as normal attr', async(inject([TestComponentBuilder], (tcb) => {
+         const html = '<ngb-progressbar [value]="value" [animated]="animated"></ngb-progressbar>';
+
+         tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
+           fixture.detectChanges();
+
+           expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('progress-animated');
+
+           fixture.componentInstance.animated = false;
+           fixture.detectChanges();
+           expect(getProgressbar(fixture.nativeElement)).not.toHaveCssClass('progress-animated');
+         });
+       })));
+
     it('accepts striped as boolean attr', async(inject([TestComponentBuilder], (tcb) => {
          const html = '<ngb-progressbar [value]="value" striped></ngb-progressbar>';
 
@@ -150,6 +174,7 @@ describe('ng-progressbar', () => {
 class TestComponent {
   value = 10;
   max = 50;
+  animated = true;
   striped = true;
   type = 'warning';
 }

Diff for: src/progressbar/progressbar.ts

@@ -5,7 +5,8 @@ import {getValueInRange, toBoolean} from '../util/util';
   selector: 'ngb-progressbar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <progress class="progress {{isStriped() && 'progress-striped'}} {{type && 'progress-' + type}}" [value]="getValue()" [max]="max">
+    <progress class="progress {{isAnimated() && 'progress-animated'}} {{isStriped() && 'progress-striped'}} {{type && 'progress-' + type}}"
+      [value]="getValue()" [max]="max">
       <div class="progress">
         <span class="progress-bar" [style.width.%]="getPercentValue()"><ng-content></ng-content></span>
       </div>
@@ -14,10 +15,13 @@ import {getValueInRange, toBoolean} from '../util/util';
 })
 export class NgbProgressbar {
   @Input() max: number = 100;
+  @Input() animated: boolean | string;
   @Input() striped: boolean | string;
   @Input() type: string;
   @Input() value: number;
 
+  isAnimated(): boolean { return toBoolean(this.animated); }
+
   isStriped(): boolean { return toBoolean(this.striped); }
 
   getValue() { return getValueInRange(this.value, this.max); }