Today I will demonstrate how to show the loading of large image and video assets and reveal those assets using custom animations once they are finished loading.
In order to show the asset loading process, we will have to make XHR requests for them instead of loading them the conventional way. I will also be using ProgressBar.js to make creating and animating the loaders easier.
It’s obvious: we want to enhance the way we interact with the world. Everything from virtual reality to smart watches show this trend. This isn’t a new desire, of course, but we are now on the verge of making new ways of interaction possible.
Today I’ll focus on what I’m most excited about in this new world that is soon to come: the ever growing internet of things and our interaction with it through wearable technology. Both seek to expand our human umwelt, allowing for new and better interactions with the world that surrounds us.
This is dedicated to my friend who has been supportive of me for years. As Psalms 139 says, you are fearfully and wonderfully made. Please take what I say to heart.
I don’t care much about what describes you. I really don’t the majority of the time. And yet, I would love to get to know you better and discuss with you because I love doing so with everyone I meet.
How can this be? Isn’t caring about who a person is necessary for good conversation?
Absolutely! People, yourself included, are fascinating and unique and I care a whole lot about you. Going a step further, I love you as God does.
How can you care for me but not about what describes me?
Because I care much more about what defines you than what describes you. That which defines you influences all of the decisions you make, which lead to descriptions of you. Descriptions can change, definitions cannot without it becoming something entirely different.
I’ve written a lot about animations, from choosing the appropriate method to limiting browser reflow, but have never made a any basic tutorial because I haven’t had much reason to. But now I see that it could be useful to get people started down the right track.
I highly recommend checking out my post on beginning web development if you’re at all interested in learning how to program for the web. It should be quite useful to you!
Throughout this tutorial I’ll be writing code in the post itself, but I am also making the assumption that you’ll follow along in a separate window using CodePen, a web compiler of sorts. I also assume you know a tiny bit of HTML and CSS, but if you don’t you should still be able to follow along. It’d be best to make sure you’re using a modern browser as well so we don’t have to worry as much about browser prefixes.
Please branch off from the tutorial to test out things! That’s a great way to learn exactly what’s going on.
I’ve learned there is one surefire way to become good at practically anything:
Surround yourself with people who are better than you and material that is beyond your understanding — the more advanced the better.
This is not something new to you; you know it well, even if you don’t think so. We all know how to become better at something, but we’re lazy. So, today I hope to provide reasons to not be lazy about it.
There is no better teacher than experience.