How do I load an animation when the page is loading?

Ember Data
1

I have a logo which is continuously moving using CSS. I would like this to only move when the page is loading, for example, when switching to another section of the web page using the navigation bar.

Could I get some help please? I’ve been stuck on this problem for quite a bit now. I’d rather avoid using jQuery as it messes up everything

2

Have you tried to use a loading substate?

1 Like
3

I did take a look at this before, but I didn’t understand how to use it.

When it says this:

 actions: {
loading: function(transition, originRoute) {
  displayLoadingSpinner();

I don’t get what I’m supposed to put for the transition and originRoute.

4

As this is a callback hook, Ember itself will provide both transition and originRoute. You don’t need to include the params if you don’t need to use them. The originRoute is just a string–the route we’re coming from. The transition object, is a little more involved. (And I cannot find it in the API for some reason.) Basically it allows one to do things like cancel the transition, retry it, etc. There’s a really good example of the latter here, where the transition object is passed to the loginController so that once the user has logged in the transition can be retried to get the user to where they were trying to go before they were intercepted so as to be prompted to log in. Also, scroll up for a loading state example. Also here.

The long and the short of it is that you might not require the params for what you want to do so you could leave them out. Ember will still pass them to the hook but you won’t be able to access them. However, it may be a good idea to include them anyway as then you’ll remember they’re there, in case you need them in the future. You will be nagged by jshint about unused variables, though.

5

Hey @Rinchen did you found the solution? I’ve created the loading template, even it’s on nesting route, It seems didn’t work, there’s no “Loading” words…

Btw, I load ajax from component, not routes.

6

hi u describe me how use it when you worked with ajax.