Server: Redesign Nextcloud Loading Animation

[eppfel]

Based on my ideas for a new animated logo in nextcloud/nextcloud.com#305 I created some loading animations using the logo's geometry.

White on blue background:

Blue on white background:

The images are actual SVGs.
Like so:

<img src="https://epp.design/assets/images/NextcloudLoadingAnimation-Rotate-InOut.svg" width="64" />

You can find the source at codepen.io.

What do you think of using the logo as loader @nextcloud/designers? No-go?

I guess I will come up with even more versions and we can tweak with different tempo.

[skjnldsv]

Basically, we can't use svg animation. This is bugged on ff and some browsers.
See this never-ending discussion about my work on the loader https://github.com/owncloud/core/issues/19091

[Espina2]

In the nextcloud website I use svg animations and i have no problem with firefox.

[skjnldsv]

@Espina2 read the whole thread. This is a loong work that took forever to be done because every browser has its flaws and aside from css only animation, svg, smil and whatever other techs always fail in at least one browser!

[eppfel]

Reading the thread, I'am confident we got the best expert for this at hand @skjnldsv 😉
Played around with HTML + CSS animations to make it work in Firefox, but no luck with IE/Edge 😁

Let's discuss design first and then we can look for implementation. As it looks from the thread, that's how you found the solution last time.

I just thought resembling aspects of the logo in the spinner is an nice idea by @Espina2 : https://github.com/nextcloud/windows-universal/issues/18#issuecomment-262737724

[Espina2]

I don't think you are going to have the same fluid animation with html and css, that I achieved with sprite. But anyway you let me curious to see the "final" version.

I remember that, and in my head I think in something very similar to what you did in the first example mixed with the third. :)

[jancborchardt]

Let’s just make sure while using general elements from the logo we don’t overuse the logo itself. It’s a logo and shouldn’t be misused as spinner necessarily.

Remember that people grow to hate spinners like the OS X beach ball. And it is not the Apple logo for a very good reason.

That said a nice animation which doesn’t look too repetitive can be nice. It needs to be absolutely performant though because otherwise it defeats the purpose. Ideally people should never see it anyway, or only for a second.

[skjnldsv]

@eppfel if you want to change it, you need to go with css ::after and/or ::before only. This is the only solution left :)

[te-online]

@eppfel I really like the general approach, but I'd also agree with @jancborchardt that we shouldn't overuse the logo. Therefore, I like the third one most, because it is most abstract. The current loader is already quite good, too, I think. But I still see a bit of wobbling – maybe because of my magnification trauma... 😄 (I randomly had a 110% zoom browser-setting when the spinner was introduced and it looked a bit weird for me back then)

[Bugsbane]

Agreed on not using the NC logo for the spinner. Incidentally, the animations didn't play on my version of Firefox ;)

[skjnldsv]

Can we close?