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

<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; }

Similar snippets: See More


Comments:

hoocen 2015-04-08 12:54:40
    How to stop it?
Bill Geits 2015-04-10 11:54:50
    Remove "m-progress" class ofc.
Joao Dias Carvalho Neto 2015-04-25 03:00:50
    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
Andrew Ozdion 2015-05-05 14:38:24
    As I see the only way to add this loading state to submit control is to use <button type="submit">...</button>.
Joao Dias Carvalho Neto 2015-05-05 14:45:04
    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. :-)
Bruno 2015-05-22 23:40:59
    How can I put this class via JQuery? Thanks for the support!
Bruno 2015-05-22 23:56:03
    I mean, when I click the button I'd like to animate it. Can you help me? Sorry for my bad english.
Adam Looze 2015-06-05 19:18:00
    $(document).ready(function () {
$("button[type=submit], .animateBtn").click(function () {
$(this).addClass("m-progress");
setTimeout(function () {
$("button[type=submit], .animateBtn").removeClass("m-progress");
}, 5000);
});
});
Adam Looze 2015-06-05 19:19:47
    Add the following code to your javascript to animate on click.
Luke Fritts 2015-06-11 15:35:41
    To make this work in safari properly, change the first keyframes to be:

Commenting will be back soon.