But we can tweak our values and adjust the animation to get it just right for the page we’re designing. There’s no right or wrong way to do this. That’s what we want after the page finishes loading. Display none doesn’t just mean its invisible, it won't even take up space on the page, completely gone. So right after it becomes 0 percent opacity, we want to set it’s display setting to none. 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. Now, let's see how we can add it and trigger it when some content loads.With a fast enough connection, page load animations should look like this. So far, we've only created a for our loader. To your own being, you will have betrayed yourself.
If you do not express your own original ideas, if you do not listen
#Loading icon how to
This is a demo Project to show how to add animated loading with React.
Basically, we have two elements in the parent (for the sake of simplicity) - one is the loader-container and the second is the main-content: import React from 'react' Let's begin by looking at our React markup. If you'd like to learn more about creating spinners from scratch, read our "How to Create a Loading Animation in React from Scratch"! Creating a Sample React App
0 kommentar(er)
