CODEWITHSUNDEEP
javascriptjqueryanimationinfinite-scrollmasonry
Katherine Moon
Katherine Moon

Reputation: 39

How can I change or remove the blue loading animation on masonry infinite scroll? [Tumblr]

I am trying to change the loading progress bar animation on my Tumblr theme to just look nicer than the regular blue loading bar over my container that I'd implemented masonry infinite scroll on.

I would prefer to use an loading bar animation that I'd created using cssload.net, but I'm open to removing or hiding the load bar all together as well. I have tried messing with it myself but I don't know anything about javascript or jquery.

Here is the code for my infinite scroll. 

{block:indexpage}
{block:NextPage}

<div id="page-nav"><a href="{NextPage}"></a></div>

{/block:NextPage}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>


<script type="text/javascript">

$(window).load(function(){
var $wall = $('#container');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '.entry, .entry_photo',
isAnimated : true
});
});
 
$wall.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '.entry, .entry_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infsrc-loading').hide('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: true}, function(){$newElems.fadeIn('slow');} );
});
}); $('#content').hide(500);
});

</script>
{/block:indexpage}

I did not write this code myself, I pulled it off of a base theme that I'd used in the past and put it into my custom theme I made for myself.

I tried adding a CSS tag for #infscr-loading to hide it, but I've had no luck.

Sorry if this question seems unclear, I am very new to coding (this is my first major project), and I only know the basics of HTML and CSS.

Here is a link to my site: http://www.katting.tumblr.com

Also I had tried following the steps given in this answer but I had no luck with that either.. and it only seemed to break my code.

Upvotes: 2

Views: 835

Answers (1)

wot
wot

Reputation: 845

Try adding this CSS class. 

#infscr-loading {
    display: none !important;
}

Upvotes: 3

Related Questions