Material Design Lite – Loading


Material Design Lite – Loading : MDL Loading Component is used to indicate the loading and progress state. Material design lite progress component is and indicator which is used to indicate some background activity. Here in this tutorial we are going to explain how you can create progress bar in material design lite.


Material Design Lite – Loading | Progress Bar | Spinner | Example

Let us go step by step to create material design lite progress bar loading. There are two types of loading components available in material design lite.

  • Progress Bar
  • Spinner

Progress Bar

Let us first understand the material design lite progress bar.

Default Progress Bar-

mdl-js-progress class is used to create default progress bar. Here is an example of default progress bar-

Material Design Lite – Default Progress Bar Example:

<br>
<div id="myId" class="mdl-progress mdl-js-progress"></div>
<script>
  document.querySelector('#myId').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(60);
  });
</script>

Try it »

If you run the above example it will produce output something like this –

Material Design Lite – Loading | Progress Bar

Indeterminate Progress Bar-

mdl-progress__indeterminate class is used to create Indeterminate progress bar. Here is an example of Indeterminate progress bar-

Material Design Lite Indeterminate Progress Bar Example:

<br>
<br>
  <div id="myId2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>

Try it »

If you run the above example it will produce output something like this –

Material Design Lite – Loading

Buffering-

You can create progress for buffering as below –

Material Design Lite Buffering Progress Bar Example:

<br>
<br>
<div id="myId3" class="mdl-progress mdl-js-progress"></div>
<script>
  document.querySelector('#myId3').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(40);
    this.MaterialProgress.setBuffer(90);
  });
</script>

Try it »

If you run the above example it will produce output something like this –

Buffering Progress Bar
Options

  • mdl-js-progressbBmdl-js-progress(Required) This is used to Assign basic MDL behavior to progress indicator.
  • mdl-progress–indeterminate(Optional) Applies animation effect

Spinner

The material design lite spinner component is basically an enhanced replacement of the classic “wait cursor”. It is used to indicate some ongoing progress.
The spinner consists of an open circle it changes colors as animates in a clockwise direction and it indicates that process has been started and waiting to
complete.

Default Spinner-

Default spinner changes color as it rotates and animates. You can create default spinner simply as below –

Material Design Lite Default Spinner Example:

<div class="mdl-spinner mdl-js-spinner is-active"></div>

Try it »

If you run the above example it will produce output something like this –

Material Design Lite Spinner

Single Color Spinner-

If you do not want to change the spinner color as it rotates you can use single color spinner. You can create single color spinner simply as below –

Material Design Lite single Spinner Example:

<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>

Try it »

If you run the above example it will produce output something like this –

Material Design Lite Single Color Spinner Example

Options