axdemelas

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

<!-- markup -->
<ul class="mdl-stepper" id="demo-stepper-non-linear">
  <li class="mdl-step">

axdemelas

<!-- 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--linear" id="demo-stepper-linear">
  <li class="mdl-step">

axdemelas

var demo = function (e) {
  // Stepper linear demonstration 
  let demoLinear = function () {
    // Select stepper container element      
    let element = document.querySelector('.mdl-stepper#demo-stepper-linear');
    if (!element) return false;
    // Get the MaterialStepper instance of element to control it          
    let stepper = element.MaterialStepper;
    let steps = element.querySelectorAll('.mdl-step');
    // Just looping and adding listener to event onstepnext to the all steps          

axdemelas

// Select your stepper element.  
var stepperElement = document.querySelector('ul.mdl-stepper');
var Stepper;

// Check if MDL Component Handler is loaded.
if (typeof componentHandler !== 'undefined') {
  // Get the MaterialStepper instance of element to control it.          
  Stepper = stepperElement.MaterialStepper;
  // Moves the stepper to the next step for test.
  Stepper.next();

axdemelas

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<!-- Stepper CSS minified -->
<link rel="stylesheet" href="./stepper.min.css">
<!-- Stepper Javascript minified -->
<script defer src="./stepper.min.js"></script>

axdemelas

var stepperElement = document.querySelector('.mdl-stepper');

stepperElement.addEventListener('onsteppercomplete', function (event) {
  // When all required steps are completed. Optional steps are ignored for dispatch this event.
  // You can redirect or do anything else.
  window.location.href = 'https://mysite.com';
});

axdemelas

var stepperElement = document.querySelector('.mdl-stepper');
// Select any step.
var step = stepperElement.querySelector('.mdl-step');

step.addEventListener('onsteperror', function (event) {
  // When MaterialStepper.error(message) method is called on step (this).
  alert('Ops! something goes wrong with this step');
});

axdemelas

var stepperElement = document.querySelector('.mdl-stepper');
// Select any step.
var step = element.querySelector('.mdl-step');

step.addEventListener('onstepcomplete', function (event) {
  // When MaterialStepper.next() method is called on step (this) and it returns true.
  alert('Good! this step was completed.');
});

axdemelas

var stepperElement = document.querySelector('.mdl-stepper');
// Get the MaterialStepper instance of element.
var Stepper = stepperElement.MaterialStepper;
// Select any step other than the first (for obvious reasons).
var step = element.querySelector('.mdl-step:nth-child(2)');

step.addEventListener('onstepback', function (event) {
  // When the step (this) action button/link with [data-stepper-back] attribute is clicked
  // you can call the back() method or do anything else.
  Stepper.back();

axdemelas

var element = document.querySelector('.mdl-stepper');
// Get the MaterialStepper instance of element.
var Stepper = element.MaterialStepper;
// Select any optional step. 
var optionalStep = element.querySelector('.mdl-step.mdl-step--optional');

optionalStep.addEventListener('onstepskip', function (event) {
  // When the step (this) action button/link with [data-stepper-skip] attribute is clicked
  // you can call the skip() method or do anything else.
  var skipped = Stepper.skip();