progress-buttons.less

.progress-button{
  display: inline-block;
  text-decoration: none !important;
  overflow: hidden;
  position:relative;
}

/* Hide the original text of the button. Then the loading or finished
   text will be shown in the :after element above it. */

.progress-button.in-progress,
.progress-button.finished{
  color:transparent !important;
}

.progress-button.in-progress:after,
.progress-button.finished:after{
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  padding-top: inherit;
  color: #fff !important;
  left: 0;
}

.progress-button.finished:after{
  color: #fff !important;
}

.progress-button.btn-default.in-progress:after,
.progress-button.btn-default.finished:after{
  color: #424856 !important;
}

/* If the .in-progress class is set on the button, show the
   contents of the data-loading attribute on the butotn */

.progress-button.in-progress:after{
  content:attr(data-loading);
}

/* The same goes for the .finished class */

.progress-button.finished:after{
  content:attr(data-finished);
}

/* The colorful bar that grows depending on the progress */

.progress-button .tz-bar{
  background-color:rgba(255,255,255,.3);
  height:3px;
  bottom:0;
  left:0;
  width:0;
  position:absolute;
  z-index:1;

  border-radius:0 0 2px 2px;

  -webkit-transition: width 0.5s, height 0.5s;
  -moz-transition: width 0.5s, height 0.5s;
  transition: width 0.5s, height 0.5s;
}

.progress-button.btn-default .tz-bar{
  background-color:rgba(0,0,0,.3);
}

/* The bar can be either horizontal, or vertical */

.progress-button .tz-bar.background-horizontal{
  height:100%;
  border-radius:2px;
}

.progress-button .tz-bar.background-vertical{
  height:0;
  top:0;
  width:100%;
  border-radius:2px;
}