Example of code for stepper with feedback

stepper-feedback-code.html

<!-- style -->
<style>
.mdl-stepper > .mdl-step > .mdl-step__content {
  background-color: rgba(0,0,0,0.2);
}
</style>

<!-- markup -->
<ul class="mdl-stepper mdl-stepper--feedback mdl-stepper--linear" id="demo-stepper-feedback">
  <li class="mdl-step">
    <span class="mdl-step__label">
      <span class="mdl-step__title">
        <span class="mdl-step__title-text">Title of step 1</span>
        <span class="mdl-step__title-message">Summarize if needed</span>
      </span>
    </span>
    <div class="mdl-step__content"></div>
    <div class="mdl-step__actions">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
        Continue
      </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
        Cancel
      </button>
    </div>
  </li>
  <li class="mdl-step">
    <span class="mdl-step__label">
      <span class="mdl-step__title">
        <span class="mdl-step__title-text">Title of step 2</span>
      </span>
    </span>
    <div class="mdl-step__content"></div>
    <div class="mdl-step__actions">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
        Continue
      </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
        Cancel
      </button>
    </div>
  </li>
  <li class="mdl-step">
    <span class="mdl-step__label">
      <span class="mdl-step__title">
        <span class="mdl-step__title-text">Title of step 3</span>
      </span>
    </span>
    <div class="mdl-step__content"></div>
    <div class="mdl-step__actions">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
        Continue
      </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
        Cancel
      </button>
    </div>
  </li>
</ul>

<!-- script -->
<script>
  // Stepper feedback demonstration 
  var demoFeedback = function (e) {
    var element = document.querySelector('.mdl-stepper#demo-stepper-feedback');
    if (!element) return false;
    var stepper = element.MaterialStepper;
    var steps = element.querySelectorAll('.mdl-step');
    var step;
    for (var i = 0; i < steps.length; i++) {
      step = steps[i];
      step.addEventListener('onstepnext', function (e) {
        // Just showing the transient effect for 3s     
        setTimeout(function () {
          // Nice now goes forward     
          stepper.next();
        }, 3000);
      });
    }
    element.addEventListener('onsteppercomplete', function (e) {
      var toast = document.querySelector('#snackbar-stepper-complete');
      if (!toast) return false;
      toast.MaterialSnackbar.showSnackbar({
        message: 'Stepper with feedback are completed',
        timeout: 4000,
        actionText: 'Ok'
      });
    });
  };
  
  window.addEventListener('load', demoFeedback);
</script>