"Loading button effect (no JS)"
Bootstrap 3.3.0 Snippet by aahz

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h1 class="col-xs-12">Loading button effect</h1> <div class="col-xs-12 text-center"> <h2>Preview</h2> <table class="table"> <tr> <th>No effect</th> <th>With effect</th> </tr> <tr> <td colspan="2">Base effect</td> </tr> <tr> <td> <button class="btn btn-lg btn-primary">Button</button> <button class="btn btn-lg btn-default">Button</button> <button class="btn btn-lg btn-info">Button</button> <button class="btn btn-lg btn-warning">Button</button> <button class="btn btn-lg btn-danger">Button</button> </td> <td> <button class="btn btn-lg btn-primary m-progress">Button</button> <button class="btn btn-lg btn-default m-progress">Button</button> <button class="btn btn-lg btn-info m-progress">Button</button> <button class="btn btn-lg btn-warning m-progress">Button</button> <button class="btn btn-lg btn-danger m-progress">Button</button> </td> </tr> <tr> <td colspan="2">For any size</td> </tr> <tr> <td> <button class="btn btn-lg btn-primary">Button</button> <button class="btn btn-primary">Button</button> <button class="btn btn-sm btn-primary">Button</button> <button class="btn btn-xs btn-primary">Button</button> </td> <td> <button class="btn m-progress btn-lg btn-primary">Button</button> <button class="btn m-progress btn-primary">Button</button> <button class="btn m-progress btn-sm btn-primary">Button</button> <button class="btn m-progress btn-xs btn-primary">Button</button> </td> </tr> </table> </div> </div> </div>
@-webkit-keyframes ld { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } } @-moz-keyframes ld { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } } @-o-keyframes ld { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } } @keyframes ld { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } } .m-progress { position: relative; opacity: .8; color: transparent !important; text-shadow: none !important; } .m-progress:hover, .m-progress:active, .m-progress:focus { cursor: default; color: transparent; outline: none !important; box-shadow: none; } .m-progress:before { content: ''; display: inline-block; position: absolute; background: transparent; border: 1px solid #fff; border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; box-sizing: border-box; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px; width: 24px; height: 24px; -webkit-animation: ld 1s ease-in-out infinite; -moz-animation: ld 1s ease-in-out infinite; -o-animation: ld 1s ease-in-out infinite; animation: ld 1s ease-in-out infinite; } .btn-default.m-progress:before { border-left-color: #333333; border-right-color: #333333; } .btn-lg.m-progress:before { margin-top: -16px; margin-left: -16px; width: 32px; height: 32px; } .btn-sm.m-progress:before { margin-top: -9px; margin-left: -9px; width: 18px; height: 18px; } .btn-xs.m-progress:before { margin-top: -7px; margin-left: -7px; width: 14px; height: 14px; }

Related: See More


Questions / Comments:

To make this work in safari properly, change the first keyframes to be:

@-webkit-keyframes ld {
0% { -webkit-transform: rotate(0deg) scale(1); }
50% { -webkit-transform: rotate(180deg) scale(1.1); }
100% { -webkit-transform: rotate(360deg) scale(1); }
}

It won't animate without the -webkit prefix in safari.

Luke Fritts (0) - 3 years ago - Reply 0


Add the following code to your javascript to animate on click.

$(document).ready(function () {
$("button[type=submit], .animateBtn").click(function () {
$(this).addClass("m-progress");
setTimeout(function () {
$("button[type=submit], .animateBtn").removeClass("m-progress");
}, 5000);
});
});

Add the above code to your footer after your jquery includes. It will cause all submit buttons and buttons with the class of "animateBtn" to animate on click. Make sure you add the class "animateBtn" to all buttons you want to animate. Also, the animation will happen for 5 seconds then remove (incase its a submit button and some fields are missing). You can change the duration above.

Adam Looze (0) - 3 years ago - Reply 0


How can I put this class via JQuery? Thanks for the support!

Bruno (0) - 3 years ago - Reply 0


I mean, when I click the button I'd like to animate it. Can you help me? Sorry for my bad english.

Bruno (0) - 3 years ago - Reply 0


$(document).ready(function () {
$("button[type=submit], .animateBtn").click(function () {
$(this).addClass("m-progress");
setTimeout(function () {
$("button[type=submit], .animateBtn").removeClass("m-progress");
}, 5000);
});
});

Add the above code to your footer after your jquery includes. It will cause all submit buttons and buttons with the class of "animateBtn" to animate on click. Make sure you add the class "animateBtn" to all buttons you want to animate. Also, the animation will happen for 5 seconds then remove (incase its a submit button and some fields are missing). You can change the duration above.

Adam Looze (0) - 3 years ago - Reply 0


Wow! Very useful! It works like a charm on button and link elements. I cannot put to work properly on input[submit] elements. Could use some help with this. Thanks in advance

Joao Dias Carvalho Neto (0) - 3 years ago - Reply 0


As I see the only way to add this loading state to submit control is to use <button type="submit">...</button>.

:before and :after pseudo selectors can not be used with very base elements like <input>, <textarea>, <select> and <img>

Andrew Ozdion (0) - 3 years ago - Reply 0


Thanks Andrew. Yeah it is! the pseudo selectors do the job in this case. I was using input as button because my application's forms needs at least 3 submit buttons. I solve this using button instead and setting value just like input way. Work like a charm for my form's submit feature. :-)

Thanks for reply

Joao Dias Carvalho Neto (0) - 3 years ago - Reply 0


How to stop it?

hoocen (0) - 3 years ago - Reply 0


Remove "m-progress" class ofc.

Bill Geits (0) - 3 years ago - Reply 0