Usage

< md-subheader > Sub Header </md-subheader>  

Divider

It is a horizontal divider for sections of a view or screen. Use directive md-divider.

Usage

<div>Content Section A</div>
<md-divider></md-divider>                  
<div>Content Section B</div>
<md-divider md-inset></md-divider>                  
<div>Content Section C</div>

md-divideris an empty element that results in a horizontal divider as shown in Figure 11-4. Notice md-inset on the second divider. It results in an inset style divider. Refer to Figure 11-4.

Figure 11-4. Divider

Linear Progress Bar

A linear progress bar is laid out horizontally. As it comparatively has bigger screen space, will show elaborate status on the long-running process. See Figure 11-5.

Figure 11-5. Linear progress bar

Create a linear progress bar with a directive md-progress-linear.

Angular material provides four modes for the progress bar.

1. Determinate: If we have definitive information on the percentage of long-running job complete, this mode will be effective. The progress bar fills up once the job is fully done. Consider the following code.

           <md-progress-linear md-mode="determinate" value="{{progress}}"></md-progress-linear>

   The precentage of job done is determined by the value attribute. The following code mimics long-running process with a timeout service. Once the value of progress is above 100, it will quit. In the sample, it is a function defined in the controller.

                  function updateProgress(){
                       $timeout(function(){
                           $scope.progress += 1;     // increment progress by 1.
                           if($scope.progress<=100){
   // Continue to call update progress recursively till progress is 100%
                               console.log($scope.progress);
                               updateProgress();
                           }
                       }, 200);                  
                  }

2. Indeterminate: When we are not certain about the percentage of job done, this is a better mode. Hide the progress bar once the job is complete. Till then, it keeps showing work-in-progress animation.

    <md-progress-linear md-mode="indeterminate"></md-progress-linear>

3. Buffer: When there are two statuses to show, use this mode. For example, consider video streaming. The extent video buffered and the percentage of time that the user saw the video are two statuses. See Figure 11-6 for buffer mode depiction.

   

   Figure 11-6. Buffer mode

   Notice two progress statuses (light orange colored progress and dark orange colored progress). On the directive, while value represents percentage of job progress, the second buffer status is determined by md-buffer-value attribute. In the sample, we use another $scope variable buffer. Based on its value, the second status progress is shown.

   <md-progress-linear md-mode="buffer" value="{{progress}}" class="md-warn"  md-buffer-value="{{buffer}}"></md-progress-linear>

4. Query: Use this mode to depict pre-loading process. It demonstrates that the real job hasn’t begun yet.

               <md-progress-linear md-mode="query"></md-progress-linear>

Circular Progress Bar

A circular progress bar is another depiction of progress for a long-running process. See Figure 11-7 for a circular progress bar.

Figure 11-7. Circular progress bar

Use the directive md-progress-circularfor creating a circular progress bar. There are two modes in which circular progress bar could be used.

1. Determinate: It shows the extent of long-running process complete. As the circle closes fully, the job is done 100%.

   Consider the following code. Use directive md-progress-circular with md-mode value “determinate” to create it in this mode. The extent of job completion is determined by value property.

   <md-progress-circular md-mode="determinate" value="{{progress}}"></md-progress-circular>

   As for the linear progress bar, in the sample, we mimic a long-running process with a $timeout service.

                  function updateProgress(){
                       $timeout(function(){
                           $scope.progress += 1;     // increment progress by 1.
                           if($scope.progress<=100){
   // Continue to call update progress recursively till progress is 100%
                               console.log($scope.progress);
                               updateProgress();
   
                           }
                       }, 200);                   
                  }

2. Indeterminate: When we do not know the percentage of job done, use this mode. Hide the progress bar once the long-running process is fully done.

   <md-progress-circular md-mode="indeterminate" ></md-progress-circular>