Loading animations between pages

Can anyone explain to me the principles of how loading animations that occur between loading pages work?

Any example is http://www.field.io . The logo “field” animates with shifting colors when you direct yourself to a new page. As you can see it’s also built in WP (pretty impressive in my opinion).

So can anyone tell me the underlying concepts involved? I’m prepared to the reading I need to do to figure out the details.

Thanks in advance.

hello there,

That is called SVG animation, Here is the technique used on your Example With Full Tutorial : Link

Goodluck

Well, I gathered that it may be an SVG animation, although I’m unfamiliar with dealing with the subject. However my question is not “how do you do an animation”. My question is how to do you make something (like an animation) occur when you’re loading a new page? It’s basically a loading animation.

He just set a Time Load, and see, the Header is position: fixed; Plus a Transition duration property… which gave this Animation loading!

Cool, thanks.

What do you mean by “Time load” though? Is that related to the CSS? I just noticed something like this in the JS relating to loading this animation:

e('<div class="loader"></div>').hide().prependTo("#logo, #mobile-logo").fadeIn(100), e(".loader").append("<div>" + n + "</div>"), setTimeout(function ()

Coincidentally, I did something like this the other day because a report I was running was taking a few seconds to render and I wanted it to look like something was happening while the page was loading. You can do it with any effect you like. It’s even easier now that we have libraries like jQuery around.

What I did was attach a behaviour to my links so that when a link was clicked the effect was initiated. In my case I darkened the screen and put one of those loading spinners in the center of the page. You could do the same thing for the navigation of a site like the one in your example by running:

* The code below requires jQuery and the navigation is in a container with id=“primary-nav”


<script>
jQuery('#primary-nav a').click(function() {
    // Your animation starts here
});
</script>