Design app loading animation

[tilmx]

During the start phase of the application, there is only a grey background shown. In order to make the start phase feel fast, we should integrate an loading animation there. Feel free to propose a nice animation!

[faaizalikhan1]

Hey! I'd love to work on this,I'm still a beginner so I don't quite know how they are made, svg animation?, or something made on after effects?

[lkuechler]

Hi @goprime10,
thank you for supporting us. We really appreciate this :)
For animations it really depends what needs to be done.
For very simple stuff a css transition is enough and lets the application feel much nicer.
If you want to do more complicated stuff canvas and svg animation can be used.

Currently we don't know what should be displayed while the app loads. This means just pick whatever you want to know better and try stuff out. :)
If you have technical questions for any of these i would be happy to support you.
If you would want to have a bit more information what could be done as a loading animation, @tilmx or @markusoelhafen can probably give you some ideas.

Thank you again for helping us

[faaizalikhan1]

@lkuechler Thank you! I'm really glad to be of help! I was thinking of using http://mojs.io/ to create something, since I have recently started learning it, and it will be a good time for me to implement it as well

[lkuechler]

Hello @goprime10 ,
sorry for taking so long to get back to you.
I see only one problem with using a library like mojs. If we only use it for the loading animation and no where else, it is a unnecessary overhead. For now i would recommend to just build a simple svg animation and implement this one first.

But if you really want to play around a bit more with mojs you can do that as well and we will see later if we can use this also in other areas of the application.

[faaizalikhan1]

@lkuechler Oh yeah, that makes sense, got it! I'll get to work, play around a bit with transitions, have a great day!

[faaizalikhan1]

So I've created a little animation: https://codepen.io/goprime/full/qodOZm/. Let me know what you guys think!

[lkuechler]

In my opinion it looks very good. Thanks for working on this :)
Maybe @markusoelhafen can give some more feedback to the look.

I just have one more thing. Would the animation not play on a bright background when Alva loads and this way the outer most circle would be nearly invisible?
Or do you already have a different background in mind?

[faaizalikhan1]

@lkuechler I didn't think of that, thanks for pointing that out! How about the outer circle having the same color as the innermost one? Or for the background, maybe it can be changed to a lighter shade of grey?

[markusoelhafen]

Hey @goprime10 ,

thanks so much for jumping into this topic! The animation looks very good already.
Maybe to resolve the issue on bright backgrounds, you could use the blue in the middle as a base tone and have the outer rings have more and more transparency? Maybe this could be the solution already :)

Concerning the animation it would be awesome if there's a way to get a more "pulsating" feeling – like it would be a real person or living organism. I'd say making the animation a little bit slower already helps.

[faaizalikhan1]

Hey! @markusoelhafen, I changed the colors based on your idea, and it looks way better, thanks for the help! And I tried to give it a more pulsating feeling: https://codepen.io/goprime/full/qodOZm. Let me know what you guys think.

[markusoelhafen]

Looks good, @goprime10 ! Also works great on both dark and bright backgrounds. I think it can be even a little bit slower, more like breathing.

[faaizalikhan1]

Thanks! @markusoelhafen how about this: https://codepen.io/goprime/full/qodOZm/ made it a bit more slow

[lkuechler]

Hey @goprime10. The loading animation looks even better now. Thank you very much for your great support :)

If you want you can also implement it in alva with issue #299.
I can also support you if something is unclear.
But if you don't have the time for it thats also okay. We would just implement it a bit later

[faaizalikhan1]

Thank you, happy to help! @lkuechler I'd love to, I'm still a beginner in js, but I can do it, just gonna read up a bit

[lkuechler]

@goprime10 Don't hesitate to ask if i can help you in any way :)