In this snippet we are giving you loading button after click or default loading. In this loading button we use font awesome icon. this is also call button click loading animation. when you click on click me button then display loading animation effect. We allows to free snippets of bootstrap button loading spinner , you can download full code of bootstrap loading animation layout. Here in this post i will give you example of bootstrap loading indicator snippet and you will get simple code of html, css and jquery. In css button spinner snippet i give you three tab with html, css and js, you can easily get code of jquery loading spinner on button click layout.


<!DOCTYPE html> <html> <head> <title>lodding Button</title> <link rel="stylesheet" type="text/css" href="custom.css"> <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body> <div class="container main-section"> <div class="row"> <div class="col-lg-12 col-md-12 col-12 heding"> <h1 class="text-center">Loading Button</h1> </div> <div class="col-lg-12 col-md-12 col-12 text-center"> <button class="pt-50 btn btn-success btn-lg buttonload" disabled="disabled"> <i class="fa fa-spinner fa-spin"></i>Loading </button> <button class="btn btn-dark btn-lg buttonload text-white" disabled="disabled"> <i class="fa fa-refresh fa-spin"></i>Loading </button> <button type="button" class="btn btn-danger btn-lg loading buttonload" id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Loading...">Click Me</button> </div> </div> </div> <script src="custom.js"></script> </body> </html>
body{ background-color:#FDCEAA !important; } .main-section{ font-family: 'Abel', sans-serif; margin-top:150px; color:#000; margin-bottom: 30px; } .buttonload .fa-spin{ margin-right:10px; } .heding h1{ text-shadow: 5px 5px 5px #fff; font-weight:bold; margin-bottom: 50px; }
$('.loading').on('click',function(){ var $btn = $(this); $btn.button('loading'); setTimeout(function(){ $btn.button('reset'); },2000); });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post


Random Blog