demo(progress-bar): Add progress bar accessibility demo page

Author: tinayuangao

src/demo-app/a11y/a11y-module.ts

@@ -14,6 +14,7 @@ import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
+import {ProgressBarAccessibilityDemo} from './progress-bar/progress-bar-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
 
 
@@ -46,6 +47,7 @@ export class AccessibilityRoutingModule {}
     DatepickerAccessibilityDemo,
     GridListAccessibilityDemo,
     InputAccessibilityDemo,
+    ProgressBarAccessibilityDemo,
     RadioAccessibilityDemo,
     SliderAccessibilityDemo,
   ]

src/demo-app/a11y/a11y.ts

@@ -25,6 +25,7 @@ export class AccessibilityDemo {
     {name: 'Datepicker', route: 'datepicker'},
     {name: 'Grid list', route: 'grid-list'},
     {name: 'Input', route: 'input'},
+    {name: 'Progress bar', route: 'progress-bar'},
     {name: 'Radio buttons', route: 'radio'},
     {name: 'Slider', route: 'slider'},
   ];

src/demo-app/a11y/progress-bar/progress-bar-a11y.html

@@ -0,0 +1,22 @@
+<section>
+  <h2>Survey progress (Determinate progress bar)</h2>
+  <md-progress-bar mode="determinate" [value]="surveyProgress" color="primary">
+  </md-progress-bar>
+</section>
+
+<section>
+  <h2>Video progress (Progress bar with buffer) </h2>
+  <md-progress-bar [value]="videoPlayValue" [bufferValue]="videoBufferValue" mode="buffer"
+                   color="primary"></md-progress-bar>
+</section>
+
+<section>
+  <h2>Loading content progress (Indeterminate progress bar)</h2>
+    <md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
+</section>
+
+<section>
+  <h2>Searching... (Query progress bar)</h2>
+
+  <md-progress-bar mode="query" color="accent"></md-progress-bar>
+</section>

src/demo-app/a11y/progress-bar/progress-bar-a11y.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'progress-bar-a11y',
+  templateUrl: 'progress-bar-a11y.html',
+})
+export class ProgressBarAccessibilityDemo {
+  surveyProgress: number = 30;
+  videoPlayValue: number = 20;
+  videoBufferValue: number = 60;
+}

src/demo-app/a11y/routes.ts

@@ -9,6 +9,7 @@ import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
+import {ProgressBarAccessibilityDemo} from './progress-bar/progress-bar-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
@@ -21,6 +22,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'datepicker', component: DatepickerAccessibilityDemo},
   {path: 'grid-list', component: GridListAccessibilityDemo},
   {path: 'input', component: InputAccessibilityDemo},
+  {path: 'progress-bar', component: ProgressBarAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
   {path: 'slider', component: SliderAccessibilityDemo},
 ];