Even though the animation is set to 0 percent opacity, it’s still there. This means we can fade out the animation over a particular duration, let’s say 1.5 seconds. Now if we were on a slower connection it might look something like this, but, just in case, let’s add opacity to this. If we preview now, it’s maybe a bit too fast. We’re going to set it’s display, its display setting, to none.
We’ll make sure the page load animation is selected, and we’ll simply set it to hide. So, once the page finishes loading, we want this thing to hide. On any of these kinds of interactions, once we create a new animation we can name it to keep things organized. What kind of animation? The one we’re creating right now. When the page finishes loading, we want to start an animation.
This is going to be a page trigger, on page load, when it finishes loading, we want our animation to go away. How can we set up a trigger to hide the animation when the page finishes loading? Let’s head over to Add an Interaction. Now, how long will this go on for? Well, we tested it, and our theory is, it’ll go on forever. When a Lottie asset like this has a transparent background, we can change the background color right here in the Style panel. We can also go in and add a background color. This way it stacks on top of other content and parts of the page won’t start appearing on top of the animation. Just in case, let’s also set the z-index, the stacking order, to an obscenely high number. And let’s size it to 100 percent width, this is 100 percent of the viewport, and 100 percent height as well. If we scroll up and down, the animation doesn’t care. That means it's fixed to the browsers viewport. Let’s close out of the settings, and for now we’ll control its position, its position on the screen, by making it fixed. We can also choose loop, which will play the animation over and over. We can drag it in anywhere, let’s put ours right at the top of the page. We’ve added this JSON file, this Lottie animation asset to the assets panel. We’ll add the Lottie animation to our project, we’ll set up a trigger for when the page finishes loading, and finally we’ll make it disappear. Let’s cover this now, and we'll do it in three parts. Now we’re going to add it to our project so it shows up on the screen and disappears once the page has finished loading. The animation was made in After Effects, we exported it using the Bodymovin plug-in. That according to Grimur, was a single frame. If there’s an error, like the server is down or your internet connection is not working, it calls the wait method to set the states.ĭon’t forget to set this method on ComponentDidMount.With a fast enough connection, page load animations should look like this. App ComponentĪpp initially renders Loader component, this will change in a while. When the details are fetched, showDetail is rendered with all the details. The loading screen is shown from loader initially. Here is the Structure of the application:
Use the starter project or use a terminal to create a new react app using create-react-app on Codesandbox. In both cases, the loading component will be visible until the data is fully loaded. I’ll also use the GitHub API to fetch my details. Lets create a react loading spinner!įor this react loading spinner tutorial, I’ll use a custom function that resolves after given seconds. This is definitely better than keeping users wondering about the current status. Loading symbol gives users a feeling of “Content will appear soon”. June 3rd, 2019 Comments Create React loading spinner