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.
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.
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>