content logo

Bootstrap Buttons:

Bootstrap Loading Button with Animation

A really important factor you need to take into consideration when designing the user interface for your website it to not make the users think. It is quite important that the interface must be easy to understand. Always remember that you are not going to design a maze or puzzle for your users. Experienced and professional web designers who have worked under many projects know a certain expectation of how a button should look and function in a design. This is what they consider the standard design and is supposed to be the perfect design. You don’t have to follow the standards exactly, however. A big part of designing website is creativity so you don’t want to copy at all. Just remember not to stray too far from the standards and you will be good.

A great way to bring some simplicity to your buttons is by using loading icons. You can also make them interesting by using buttons with animation. In this post, we have some loading animated buttons that are perfect for processes that take long to complete. The Bootstrap button we have here is designed for uploading. It features the button plus a process bar below it that will fill up as the process is completed. The buttons itself features an animated border rotation effect. There is also a cancel button available in case you wanted to stop the process. In short, the Bootstrap animating button we have here can be such a great addition to your new website.

#

Bootstrap Animating Button

#

Loading Animated Button

#

Bootstrap Buttons

#

Buttons with Animation

<!-- This script got from frontendfreecode.com -->
<a href="#" class="btn btn-default" id="btn-cancel">Cancel</a>
<div class="spinner-wrap">
    <a href="#" class="btn btn-default btn-sending">
        <i class="fa fa-file" aria-hidden="true"></i>Uploading...<div class="percent"></div>
        <div class="progress-bar-holder">
            <div class="progress-bar"></div>
        </div>
    </a>
</div>
<div class="spinner-wrap">
    <a href="#" class="btn btn-primary btn-busy">
        Click me
    </a>
    <span class="busy-text">Saving...</span>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
  padding-top: 100px;
  text-align: center;
}
.btn .fa {
  margin-right: 6px;
}
.btn-primary {
  background-color: #d04b20;
  border-color: #b5411c;
}
.btn-primary:hover {
  background-color: #ba431d;
  border-color: #a43b19;
}
.btn-primary:active, .btn-primary:focus {
  background-color: #b1401b !important;
  border-color: #923516 !important;
}
.btn[disabled] {
  opacity: 1;
  color: rgba(0, 0, 0, 0.6);
}
.btn {
  border-radius: 0;
}
.btn-busy[disabled], .btn-busy[disabled]:focus {
  background-color: white !important;
  border-color: #f3c0b0 !important;
}
.spinner-wrap {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  z-index: 1;
  position: relative;
}
.btn-busy {
  position: relative;
  z-index: 0;
}
.percent {
  display: inline-block;
  vertical-align: top;
  width: 0;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  transition: all 0.2s ease-out;
}
.btn-busy[disabled] .percent {
  opacity: 1;
}
.progress-bar-holder {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #f3c0b0;
  height: 0;
  transition: all 0.3s ease-out;
  overflow: hidden;
}
.progress-bar {
  height: 200%;
  transform: translateY(-50%);
  background-color: #d04b20;
  width: 0;
}
.btn-busy[disabled]:before {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  background-color: white;
  z-index: -1;
  animation: 0.15s orange-to-white-bg ease-out;
}
.btn-busy[disabled]:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform-origin: top left;
  animation: 2s rotanimation infinite linear;
  z-index: -2;
  background-color: #d04b20;
  box-shadow: 0 0 10px 4px #d04b20;
}
.busy-text {
  position: absolute;
  display: block;
  padding: 6px;
  display: none;
  opacity: 0;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  background-color: white;
  transition: opacity 0.15s ease-out;
}
@keyframes rotanimation {
0% {
  transform: rotate(0deg) translateX(0) translateY(0);
}
100% {
  transform: rotate(360deg) translateX(0) translateY(0);
}
}
@keyframes spinimation {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}
@keyframes orange-to-white-bg {
0% {
  background-color: #d04b20;
  transform: scale(1.5);
}
100% {
  background-color: white;
  transform: scale(1);
}
}
$(function() {
  var percent = 0;
  setInterval(function() {
    //$(".percent").text(percent + "%");
    $(".progress-bar").css("width", percent + "%");
    percent += Math.round((Math.random()*20)+5);
    percent %= 100;
    if(percent < 15) {
      //$(".percent").css("width",     "0");
      $(".progress-bar-holder").css("height", 0);
      $(".percent").css("opacity",   0);
    } else {
      //$(".percent").css("width",     "35px");
      $(".progress-bar-holder").css("height", "3px");
      $(".percent").css("opacity",   1);
    }
  }, 800);
  $(".btn-busy").on("click", function() {
    $(this).attr("disabled", true);
    $(this).prop("disabled", true);
    $(this).addClass("disabled");
  });
  $("#btn-cancel").on("click", cancelAll);
});
function cancelAll() {
  $(".btn-busy").removeAttr("disabled");
  $(".btn-busy").removeProp("disabled");
  $(".btn-busy").removeClass("disabled");
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<style>
body {
  padding-top: 100px;
  text-align: center;
}
.btn .fa {
  margin-right: 6px;
}
.btn-primary {
  background-color: #d04b20;
  border-color: #b5411c;
}
.btn-primary:hover {
  background-color: #ba431d;
  border-color: #a43b19;
}
.btn-primary:active, .btn-primary:focus {
  background-color: #b1401b !important;
  border-color: #923516 !important;
}
.btn[disabled] {
  opacity: 1;
  color: rgba(0, 0, 0, 0.6);
}
.btn {
  border-radius: 0;
}
.btn-busy[disabled], .btn-busy[disabled]:focus {
  background-color: white !important;
  border-color: #f3c0b0 !important;
}
.spinner-wrap {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  z-index: 1;
  position: relative;
}
.btn-busy {
  position: relative;
  z-index: 0;
}
.percent {
  display: inline-block;
  vertical-align: top;
  width: 0;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  transition: all 0.2s ease-out;
}
.btn-busy[disabled] .percent {
  opacity: 1;
}
.progress-bar-holder {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #f3c0b0;
  height: 0;
  transition: all 0.3s ease-out;
  overflow: hidden;
}
.progress-bar {
  height: 200%;
  transform: translateY(-50%);
  background-color: #d04b20;
  width: 0;
}
.btn-busy[disabled]:before {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  background-color: white;
  z-index: -1;
  animation: 0.15s orange-to-white-bg ease-out;
}
.btn-busy[disabled]:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform-origin: top left;
  animation: 2s rotanimation infinite linear;
  z-index: -2;
  background-color: #d04b20;
  box-shadow: 0 0 10px 4px #d04b20;
}
.busy-text {
  position: absolute;
  display: block;
  padding: 6px;
  display: none;
  opacity: 0;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  background-color: white;
  transition: opacity 0.15s ease-out;
}
@keyframes rotanimation {
0% {
  transform: rotate(0deg) translateX(0) translateY(0);
}
100% {
  transform: rotate(360deg) translateX(0) translateY(0);
}
}
@keyframes spinimation {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}
@keyframes orange-to-white-bg {
0% {
  background-color: #d04b20;
  transform: scale(1.5);
}
100% {
  background-color: white;
  transform: scale(1);
}
}
</style>

</head>
<body>
<a href="#" class="btn btn-default" id="btn-cancel">Cancel</a>
<div class="spinner-wrap">
    <a href="#" class="btn btn-default btn-sending">
        <i class="fa fa-file" aria-hidden="true"></i>Uploading...<div class="percent"></div>
        <div class="progress-bar-holder">
            <div class="progress-bar"></div>
        </div>
    </a>
</div>
<div class="spinner-wrap">
    <a href="#" class="btn btn-primary btn-busy">
        Click me
    </a>
    <span class="busy-text">Saving...</span>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(function() {
  var percent = 0;
  setInterval(function() {
    //$(".percent").text(percent + "%");
    $(".progress-bar").css("width", percent + "%");
    percent += Math.round((Math.random()*20)+5);
    percent %= 100;
    if(percent < 15) {
      //$(".percent").css("width",     "0");
      $(".progress-bar-holder").css("height", 0);
      $(".percent").css("opacity",   0);
    } else {
      //$(".percent").css("width",     "35px");
      $(".progress-bar-holder").css("height", "3px");
      $(".percent").css("opacity",   1);
    }
  }, 800);
  $(".btn-busy").on("click", function() {
    $(this).attr("disabled", true);
    $(this).prop("disabled", true);
    $(this).addClass("disabled");
  });
  $("#btn-cancel").on("click", cancelAll);
});
function cancelAll() {
  $(".btn-busy").removeAttr("disabled");
  $(".btn-busy").removeProp("disabled");
  $(".btn-busy").removeClass("disabled");
}
</script>

</body>
</html>
Preview