Button Prograssive

by Santosh Thakur

HTML

<div class="row">
  <div class="progress-btn" data-progress-style="fill-back">
    <div class="btn">Button</div>
    <div class="progress"></div>
  </div>

  <div class="progress-btn" data-progress-style="fill-bottom">
    <div class="btn">Button</div>
    <div class="progress"></div>
  </div>

  <div class="progress-btn" data-progress-style="fill-top">
    <div class="btn">Button</div>
    <div class="progress"></div>
  </div>
</div>

<div class="row">
  <div class="progress-btn" data-progress-style="indefinite">
    <div class="btn">Button</div>
    <div class="progress"></div>
  </div>

  <div class="progress-btn" data-progress-style="indefinite-circle">
    <div class="btn">Button</div>
    <svg class="progress circle-loader" width="40" height="40" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle cx="20" cy="20" r="15">
    </svg>
  </div>
</div>

CSS

.row {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}

.progress-btn {
  position: relative;
  width: 150px;
  height: 50px;
  display: inline-block;
  background: #f44336;
  font-family: "RobotoDraft", "Roboto", sans-serif;
  color: #fff;
  font-weight: normal;
  font-size: 20px;
  transition: all 0.4s ease;
}

.progress-btn:not(.active) {
  cursor: pointer;
}

.progress-btn .btn {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  line-height: 50px;
  text-align: center;
  z-index: 10;
  opacity: 1;
}

.progress-btn .progress {
  width: 0%;
  z-index: 5;
  background: #D32F2F;
  opacity: 0;
  transition: all 0.3s ease;
}

.progress-btn.active .progress {
  opacity: 1;
  animation: progress-anim 10s ease 0s;
}

.progress-btn[data-progress-style='indefinite'].active .progress {
  animation: progress-indefinite-anim 1s infinite linear 0s;
}

.progress-btn[data-progress-style='fill-bottom'].active .progress,
.progress-btn[data-progress-style='fill-top'].active .progress {
  height: 5px;
}

.progress-btn[data-progress-style='indefinite-circle'].active .progress {
  animation: dash 2s ease infinite, rotate 2s linear infinite;
}

.progress-btn[data-progress-style='indefinite-circle'].active {
  width: 50px;
}

.progress-btn[data-progress-style='fill-back'] .progress {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.progress-btn[data-progress-style='fill-bottom'] .progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
}

.progress-btn[data-progress-style='fill-top'] .progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
}

.progress-btn[data-progress-style='indefinite'] .progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:...

JavaScript

$(document).ready(function() {
  $(".progress-btn").on("click", function() {
    var progressBtn = $(this);

    if (!progressBtn.hasClass("active")) {
      progressBtn.addClass("active");
      setTimeout(function() {
        progressBtn.removeClass("active");
      }, 10000);
    }
  })
});