• 883.00 B
  • HTML, JS
  • Button
  • animation
  • MIT License
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<script src=""></script>
<div style="margin:3em;">
<button type="button" class="btn btn-primary btn-lg " id="load1" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>
<button type="button" class="btn btn-primary btn-lg" id="load2" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button>
$('.btn').on('click', function() {
    var $this = $(this);
    setTimeout(function() {
   }, 5000);

Let’s dive into a fun little piece of code that jazzes up a web page with some nifty button animations using Bootstrap. Imagine you’re setting up an online shop, and you want to make the checkout process a bit more engaging for your customers. This code snippet is your little helper in achieving just that.

First off, we’re bringing in some heavy hitters from the web world: Bootstrap and Font Awesome. Bootstrap is like the Swiss Army knife for web developers, making it a breeze to create responsive and good-looking sites. Font Awesome, on the other hand, is your go-to for all those neat icons you see sprinkled across the web.

Now, to the heart of the matter: we’ve got two buttons. Both are styled to look big and important, thanks to Bootstrap’s btn, btn-primary, and btn-lg classes. But here’s where the magic happens. When you click on these buttons, they don’t just sit there; they come alive with spinning icons, signaling that something is happening in the background (like processing an order). One button shows a spinning circle, and the other a spinning spinner icon. It’s all about giving your users that visual cue that their request is being handled.

And how does this animation start? With a bit of jQuery magic. When either button is clicked, we change its label to show the spinning icon, simulating a loading process. This animation keeps going for a spell (5 seconds to be exact), after which the button goes back to its original state. It’s a simple but effective way to make your web interactions feel more dynamic and responsive.

So, in a nutshell, this code snippet is about making buttons on your web page not just clickable but also lively and informative, using Bootstrap’s styles and some jQuery tricks. It’s a small touch, but it’s these little details that can make your web page stand out in the sea of the internet.