<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="page-header"> <h1>Dropdown Loading Button</h1> </div> <p> <div class="dropdown"> <button id="btn_123" data-loading-text="<i class='fa fa-cog fa-spin'></i>" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cog"></i> <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#" onclick="action(123); return false;"><i class="fa fa-edit fa-fw"></i> Edit</a></li> <li><a href="#" onclick="action(123); return false;"><i class="fa fa-thumbs-o-up fa-fw"></i> Up</a></li> </ul> </div> </p> <p> <div class="dropdown"> <button id="btn_124" data-loading-text="<i class='fa fa-cog fa-spin'></i>" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cog"></i> <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#" onclick="action(124); return false;"><i class="fa fa-edit fa-fw"></i> Edit</a></li> <li><a href="#" onclick="action(124); return false;"><i class="fa fa-thumbs-o-up fa-fw"></i> Up</a></li> </ul> </div> </p> </div>

@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css");

function action(id){ $("#btn_"+id).button("loading"); setTimeout(function(){ $("#btn_"+id).button("reset"); }, 2000); }