"Bootstrap 4 Loading Buttons"
Bootstrap 4.1.1 Snippet by themesberg

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Bootstrap 4 Loading Buttons</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body class="p-3"> <div class="mb-3"> <h2>Bootstrap 4 Loading Buttons</h2> <label> <input id="toggleTransitions" type="checkbox" data-check-toggle="toggle"> Toggle loading buttons </label> </div> <button class="btn btn-primary btn-loading-overlay mr-2 mb-2" type="button"> <span class="spinner"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> </span> <span class="btn-inner-text">Submit</span> </button> <button class="btn btn-danger btn-loading-overlay mr-2 mb-2" type="button"> <span class="spinner"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> </span> <span class="btn-inner-text">Submit</span> </button> <button class="btn btn-warning btn-loading-overlay mr-2 mb-2" type="button"> <span class="spinner"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> </span> <span class="btn-inner-text">Submit</span> </button> <button class="btn btn-primary btn-loading-overlay mr-2 mb-2" type="button"> <span class="spinner"> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> </span> <span class="btn-inner-text">Submit</span> </button> <button class="btn btn-danger btn-loading-overlay mr-2 mb-2" type="button"> <span class="spinner"> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> </span> <span class="btn-inner-text">Submit</span> </button> <button class="btn btn-warning btn-loading-overlay mr-2 mb-2" type="button"> <span class="spinner"> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> </span> <span class="btn-inner-text">Submit</span> </button> <div class="mt-3"> <p>Made with love by <a href="https://themesberg.com">Themesberg</a></p> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>
.spinner-border, .spinner-brow { vertical-align: middle; } .btn-loading-overlay { position: relative; } .btn-loading-overlay .btn-inner-text, .btn-loading-overlay .spinner { transition: 0.3s all ease; } .btn-loading-overlay .spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } .btn-loading-overlay .btn-inner-text { opacity: 1; } .btn-loading-overlay.btn-loading .spinner { opacity: 1; } .btn-loading-overlay.btn-loading .btn-inner-text { opacity: 0; }
var $toggleTransitions = $("#toggleTransitions"); var $buttonOverlay = $(".btn-loading-overlay"); $toggleTransitions.on("change", function() { if ($(this).is(":checked")) { $buttonOverlay.addClass("btn-loading"); $buttonOverlay.attr("disabled", true); } else { $buttonOverlay.removeClass("btn-loading"); $buttonOverlay.attr("disabled", false); } });

Related: See More

Paper Kit 2 Angular
loading circle
Lazy Loading Images with placeholders

Questions / Comments: