Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS - Beyond the Basics CSS Animation Basics Keyframe Rules and Animation Properties

Posted by johan leandisco
johan leandisco
1,178 Points

How to used to load time

Hi, im learning about css animations here and i want to know how can apply this loading bar appear on load time of a ajax request?

1 Answer

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

I've already done it using the JQuery ajaxStart & ajaxStop methods (With font awesome for the loader).

As a quick example:

Javascript

$(document).ajaxStart(function() {
    $("#loadAjax").show();
});

$(document).ajaxStop(function(){ // Hide it once the ajax request is done.
    $("#loadAjax").hide();
});


$('nav li a').click(function(){ // when you click on the anchor, show the loader.
    $("#loadAjax").show();
});

For the HTML as I wrote above, I simply used font awesome on my side. Here is the snippet.

HTML

    <div id="loadAjax">
        <i class="fa fa-spinner fa-xx fa-spin"></i>
    </div>

Lastly don't forget to hide the loader with some css, as you simply want to show that one when there is an ajax request.

CSS

#loadAjax{
   display:none;
}

Hope it helps. You'll probably be able to adapt it with your css animation.

johan leandisco
johan leandisco
1,178 Points

Awesome, i didn't know about that. Thanks.