Pulse Wizard

This is an example of a form wizard with pulsing active steps

by Shawn Wood

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svg-with-js/css/fa-svg-with-js.css">
<script src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svg-with-js/js/fontawesome-all.min.js"></script>
<script src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svg-with-js/js/fa-v4-shims.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div class="container-fluid">
<div class="row">
<h2 class="col-sm-6">
My Wizard
</h2>
</div>
  <div class="row">
    <div class="col-sm-12">
      <div id="rootwizard">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
              <ul class="nav nav-tabs nav-justified fuel-tabs">
                <li>
                  <a href="#tab1" data-toggle="tab">
                    <span class="innerCircle">
                      <i class="fas fa-file-alt fa-2x"></i>
                      <span class="circleText">Overview</span>
                    </span>                    
                  </a>
                </li>
                <li>
                  <a href="#tab2" data-toggle="tab">
                    <span class="innerCircle">
                      <i class="fas fa-hand-holding-usd fa-2x"></i>
                      <span class="circleText">Funding</span>
                    </span>          
                  </a>
                </li>
                <li>
                  <a href="#tab1" data-toggle="tab">
                    <span class="innerCircle">
                     ...

CSS

/* Safari 4.0 - 8.0 */
@-webkit-keyframes glowing {
    50% {box-shadow: inset 0 0 30px #337ab7;}
}

@keyframes glowing {
    50% {box-shadow: inset 0 0 30px #337ab7;}
}

.nav.nav-tabs li:not(.active) a {
  border-radius: 50%;
  border-bottom: none;
  padding-top:8px;
  padding-left: 8px;
  height: 80px;
  width: 80px;
  background: none;
  border: 2px solid #CCCCCC;
  text-align: center;
}

.navbar .navbar-inner .nav.nav-tabs li:not(.active) a > .innerCircle {
  border-radius: 50%;
  border-bottom: none;
  display: inline-block;
  padding-top:6px;
  height: 60px;
  width: 60px;
  background-color: #CCCCCC;
  text-align: center;
}
.navbar .navbar-inner .nav.nav-tabs li:not(.active) a > .innerCircle .circleText, .navbar .navbar-inner .nav.nav-tabs li.active a > .innerCircle .circleText {
  display: block;
  font-size:.7em;
  text-align: center;
}
.nav.nav-tabs li.active a,
.nav.nav-tabs li.active a:focus {
  border-radius: 50%;
  padding-top:8px;
  padding-left: 8px;
  border-bottom: none;
  height: 80px;
  width: 80px;
  background: none;
  border: 2px solid #337ab7;
  text-align: center;
  animation: glowing 4s ease-in infinite;
  -webkit-animation: glowing 4s ease-in infinite; /* Safari 4.0 - 8.0 */
}
.navbar .navbar-inner .nav.nav-tabs li.active a > .innerCircle {
  border-radius: 50%;
  border-bottom: none;
  display: inline-block;
  padding-top:6px;
  height: 60px;
  width: 60px;
  background-color: #337ab7;
  text-align: center;
}
.nav.nav-tabs li.active:before,
.nav.nav-tabs li.active:after {
  position: absolute;
  content: '';
  height: 80px;
  width: 80px;
  top: 0%;
  left: 0%;
  border-radius: 50%;
  box-shadow: 0 0 10px #287ec6;
  animation: glow-grow 2s ease-out infinite;
}

.nav.nav-tabs li.active:after {
  animation-delay: .66s;
}
.nav.nav-tabs li.active a{
  animation-delay: 1.33s;
  }
@keyframes glow-grow {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

JavaScript

$(document).ready(function() {
  $('#rootwizard').bootstrapWizard({
    onTabShow: function(tab, navigation, index) {
      var $total = navigation.find('li').length;
      var $current = index + 1;
      var $percent = ($current / $total) * 100;
      $('#rootwizard .progress-bar').css({
        width: $percent + '%'
      });
    }
  });
});