docs(demos): add more progress bar examples (#7859)

Author: amcdnl

src/lib/progress-bar/progress-bar.md

@@ -1,29 +1,42 @@
 `<mat-progress-bar>` is a horizontal progress-bar for indicating progress and activity.
 
-<!-- example(progress-bar-overview) -->
+### Progress mode
+The progress-bar supports four modes: determinate, indeterminate, buffer and query.
 
+#### Determinate
+Operations where the percentage of the operation complete is known should use the 
+determinate indicator.
 
-### Progress mode
-The progress-bar supports four modes.
+<!-- example(progress-bar-determinate) -->
+
+This is the default mode and the progress is represented by the `value` property.
+
+#### Indeterminate
+Operations where the user is asked to wait while something finishes and it’s 
+not necessary to indicate how long it will take should use the indeterminate indicator.
 
-| Mode          | Description                                                                      |
-|---------------|----------------------------------------------------------------------------------|
-| determinate   | Standard progress bar, fills from 0% to 100%                                     |
-| indeterminate | Indicates that something is happening without conveying a discrete progress      |
-| buffer        | Dual-progress mode, typically showing both video download and playback progress  |
-| query         | Dual-stage mode, typically showing sending a request and downloading a response  |
+<!-- example(progress-bar-indeterminate) -->
 
-The default mode is "determinate". In this mode, the progress is set via the `value` property, 
-which can be a whole number between 0 and 100.
+In this mode the `value` property is ignored.
+
+#### Buffer
+Operations where the user wants to indicate some activity or loading from the server, 
+use the buffer indicator.
+
+<!-- example(progress-bar-buffer) -->
 
 In "buffer" mode, `value` determines the progress of the primary bar while the `bufferValue` is 
 used to show the additional buffering progress.
 
-In "query" mode, the progress-bar renders as an inverted "indeterminate" bar. Once the response 
-progress is available, the `mode` should be changed to determinate to convey the progress.  
+#### Query
+For situations where the user wants to indicate pre-loading (until the loading can actually be made), 
+use the query indicator.
 
-In both "indeterminate" and "query" modes, the `value` property is ignored.
+<!-- example(progress-bar-query) -->
 
+In "query" mode, the progress-bar renders as an inverted "indeterminate" bar. Once the response 
+progress is available, the `mode` should be changed to determinate to convey the progress. In
+this mode the `value` property is ignored.
 
 ### Theming
 The color of a progress-bar can be changed by using the `color` property. By default, progress-bars

src/material-examples/example-module.ts

@@ -74,8 +74,11 @@ import {MenuOverviewExample} from './menu-overview/menu-overview-example';
 import {NestedMenuExample} from './nested-menu/nested-menu-example';
 import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example';
 import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example';
+import {ProgressBarBufferExample} from './progress-bar-buffer/progress-bar-buffer-example';
 import {ProgressBarConfigurableExample} from './progress-bar-configurable/progress-bar-configurable-example';
-import {ProgressBarOverviewExample} from './progress-bar-overview/progress-bar-overview-example';
+import {ProgressBarDeterminateExample} from './progress-bar-determinate/progress-bar-determinate-example';
+import {ProgressBarIndeterminateExample} from './progress-bar-indeterminate/progress-bar-indeterminate-example';
+import {ProgressBarQueryExample} from './progress-bar-query/progress-bar-query-example';
 import {ProgressSpinnerConfigurableExample} from './progress-spinner-configurable/progress-spinner-configurable-example';
 import {ProgressSpinnerOverviewExample} from './progress-spinner-overview/progress-spinner-overview-example';
 import {RadioNgModelExample} from './radio-ng-model/radio-ng-model-example';
@@ -483,15 +486,33 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: null,
     selectorName: null
   },
+  'progress-bar-buffer': {
+    title: 'Buffer progress-bar',
+    component: ProgressBarBufferExample,
+    additionalFiles: null,
+    selectorName: null
+  },
   'progress-bar-configurable': {
     title: 'Configurable progress-bar',
     component: ProgressBarConfigurableExample,
     additionalFiles: null,
     selectorName: null
   },
-  'progress-bar-overview': {
-    title: 'Basic progress-bar',
-    component: ProgressBarOverviewExample,
+  'progress-bar-determinate': {
+    title: 'Determinate progress-bar',
+    component: ProgressBarDeterminateExample,
+    additionalFiles: null,
+    selectorName: null
+  },
+  'progress-bar-indeterminate': {
+    title: 'Indeterminate progress-bar',
+    component: ProgressBarIndeterminateExample,
+    additionalFiles: null,
+    selectorName: null
+  },
+  'progress-bar-query': {
+    title: 'Query progress-bar',
+    component: ProgressBarQueryExample,
     additionalFiles: null,
     selectorName: null
   },
@@ -793,8 +814,11 @@ export const EXAMPLE_LIST = [
   NestedMenuExample,
   PaginatorConfigurableExample,
   PaginatorOverviewExample,
+  ProgressBarBufferExample,
   ProgressBarConfigurableExample,
-  ProgressBarOverviewExample,
+  ProgressBarDeterminateExample,
+  ProgressBarIndeterminateExample,
+  ProgressBarQueryExample,
   ProgressSpinnerConfigurableExample,
   ProgressSpinnerOverviewExample,
   RadioNgModelExample,

src/material-examples/progress-bar-overview/progress-bar-overview-example.css renamed to src/material-examples/progress-bar-buffer/progress-bar-buffer-example.css

@@ -0,0 +1 @@
+<mat-progress-bar mode="buffer"></mat-progress-bar>

src/material-examples/progress-bar-buffer/progress-bar-buffer-example.html

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Buffer progress-bar
+ */
+@Component({
+  selector: 'progress-bar-buffer-example',
+  templateUrl: 'progress-bar-buffer-example.html',
+})
+export class ProgressBarBufferExample {}

src/material-examples/progress-bar-buffer/progress-bar-buffer-example.ts

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/progress-bar-determinate/progress-bar-determinate-example.css

@@ -0,0 +1 @@
+<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>

src/material-examples/progress-bar-determinate/progress-bar-determinate-example.html

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Determinate progress-bar
+ */
+@Component({
+  selector: 'progress-bar-determinate-example',
+  templateUrl: 'progress-bar-determinate-example.html',
+})
+export class ProgressBarDeterminateExample {}

src/material-examples/progress-bar-determinate/progress-bar-determinate-example.ts

@@ -0,0 +1 @@
+/** No CSS for this example */