Home Web Development Bootstrap Solution to: What’s a good ajax/jQuery load indicator plugin for use in...

Get social!

Solution: This one! http://www.jqueryscript.net/loading/Buttons-with-Built-in-Loading-Indicators-For-Bootsrap-3-Ladda-Bootstrap.html

During my last post I talked how I created a simple but scalable page loading indicator, as opposed to an ajax loading indicator. Now I need the latter. I tried using the same page loading indicator code from the aforementioned post, but I had problems with getting the “Loading…” text to center vertically when the user scrolled to the bottom of the page. Plus I didn’t like the navbar and footer bar getting placed behind the loading indicator, since only the content within was changing. Too 2008.

The above solution is easy to implement and much more elegant. There are plenty of examples on the plugin’s web page.

One problem I came across was since I used the plugin in a Bootstrap 3 paginator class, the text on the “button” (“a” tag, actually) would remain. In other words, the transition wasn’t taking affect. The solution was to add the “ladda-button” class to the “a” tag. Here’s the dom element:

<h3 class="properties-header">Properties</h3>
<ul class="pagination properties">
<li><a class="ladda-button" data-spinner-color="#428bca" href="#" data-style="zoom-in" rel="prop-prev">Prev</a></li>
<li><a data-style="zoom-in" data-spinner-color="#428bca" class="ladda-button" href="#" rel="prop-next">Next</a></li>

Here’s the Javascript I used to make the magic happen:

$(function() {
    $('a[rel^=prop-]').click(function(e) {
        var l = Ladda.create(this);
        var toks = $(this).attr('rel').split('-');
        $('#properties-list').animate({opacity: 0}, 250, function() {
            $('#properties-list').load('properties-list.php?' + toks[1] + '=true', function() {
                $('#properties-list').animate({opacity: 1}, 1000);
                $('html, body').animate({scrollTop:0}, 'slow');

That’s all she wrote. I’m grateful to the folks who spend so much time on these things. They cut my work load in half, they do!

Bad Behavior has blocked 143 access attempts in the last 7 days.