Switch to simpler looking loading spinner

[jancborchardt]

We should switch to a simpler spinner for the next version. The current one is very complex, has many parts, and the GIF is not optimized for HiDPI.

Similar to this maybe (of course better quality and scalable etc.):

Or the one of the new HTML5 player on https://twitch.tv

Ref owncloud/gallery#336 for previous discussion on the spinner. cc @owncloud/designers @oparoz

[oparoz]

GIFs don't work well on all backgrounds and should never be used for a spinner where you don't control the environment It would be best to go with CSS.

I've never been a fan of the Android spinner, but I know picking a good one is time consuming.

[oparoz]

A few more issues with GIFs: apps and users can't theme them. With CSS, you change the colour and you're in business.

[jancborchardt]

@oparoz as said in another issue: GIFs can be themed – simply change the image in the theme.

It is correct though that there are issues with the background and the look, I don’t disagree with that. However, we should approach this properly with 9.0 and from core out, not Gallery going its own way for 8.2, essentially breaking themed loading spinners.

[oparoz]

GIFs can be themed – simply change the image in the theme

Yes, but that means creating an entirely new spinner or having excellent Photoshop skills. You can't just set the colour via CSS.

[PVince81]

There are also pure-CSS spinners (probably not working in IE8 but who cares)

[oparoz]

probably not working in IE8 but who cares

You know who ;), Chinese users stuck on XP :)

[oparoz]

And there is a big problem which needs to be solved in core for 9.0 regarding the spinner. They need to be applied to their own divs so that themes can't use high quality spinner. You have to get rid of all the spinners which are simply applied to large containers.

[oparoz]

Use a DIV spinner, go to settings, make the window narrow, try to use the top-right menu. It doesn't work.
Just one of the examples of things which are currently broken when using a non-GIF spinner.

[jancborchardt]

Played around a bit with a good-looking CSS spinner, here’s what we could start with:

.loading {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border: 3px solid rgba(240, 240, 240, .25);
    border-left-color: rgba(180, 180, 180, .5);
    border-radius: 50%;
    -webkit-animation: loading-spin .5s infinite linear;
    animation: loading-spin .5s infinite linear;
}

@-webkit-keyframes loading-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loading-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

Anyone up for playing around with that @owncloud/designers?

[oparoz]

Looking forward to testing this :)

[MorrisJobke]

I would double the time (otherwise it looks a bit too fast). Beside that it looks really nice :)

[blackcrack]

should be able to have all in the themefolder
/theme/example/loader/loader.html
/theme/example/loader/loader.css
http://cssload.net/
to have a possible for change it easy out.
with other css designs.

best regards
Blacky

[Henni]

@jancborchardt I like your code sample, but would maybe slow it down like @MorrisJobke suggested.
This is what it looks like with an animation speed of 0.8 instead of 0.5:
http://codepen.io/Henni/pen/EPWOXK

[blackcrack]

well, i did not know Jan's issue before, but i have send also an an sample ....
#21477 (comment)
and i guess, it's maybe nice possible's.. for replace a "heavy" gif or animated picture, because with png's it's possible too (animated png's) but with css3 it's just more clean and maybe also more nice.
and the speed can be adjusting by owner in the css-file and can be at first more slow .. imho, but the
themefile for it should be as a single file in htm (include ('$theme/loader/loader.htm') or $themeloader/loader.htm') ) and in the cssfile would also well placed by side of the htm,
as loader.css and should be by side of the theme as single possible imo,
for fast find and easy change and set up ..
best regards
Blacky

[oparoz]

@blackcrack - Just add the CSS to your custom theme's CSS and it will replace the original spinner

[blackcrack]

well, some designer it's maybe happy if he must not search in the whole css files or something and it is clean to see which it is which .. i can, but not any it's so well like you and me where can do it.. by the way, i am do not only css i am also in php ;) but at moment i am in work with my laptop and this writing is it which I can now only do .. i have to concentrate to my job.. ;)
best regards
Blacky

[dominicrico]

Also would be good to put this into a pseudo element with an overlaying background so you can keep the original content of the element if you refresh or reload something via ajax.

[rullzer]

Would also be good for #22350

[prastut]

Catching up with the material trend http://codepen.io/prastutkumar/pen/grbKZZ
A little skeptical about it though. Opinions?

[jancborchardt]

@prastut the Material Design spinner takes way too much attention because it’s so complex. A spinner is not supposed to do that. Also, it’s heavily branded and associated with Google/Android, so we will not use it.

If you’re up for improving the spinner, check out the code I posted at #19091 (comment) and feel free to implement it. :)

[MorrisJobke]

@MorrisJobke so smil + css? Css only exclude firefox, and it's still used a lot! :/
I could try to work on the fallback.

Really? Firefox could not use any CSS transitions?

I would go the CSS way and still support the old background image based spinners
In my experience, this doesn't work, you see both at the same time.

Then we simply need to add them as a different class name ;) it is even a complete different concept. Fine with me.

[skjnldsv]

We're loosing focus! :)

SMIL is working on all browsers except ie.
I suggest we go for it and wait for full css support. If you look at the support chart http://caniuse.com/#feat=svg-smil, we have at least 4 future chrome and firefox version that still support it. This should gives us plenty of time to change it when the time will come.

Either way, i'm currently working on a hack to have a svg with css AND smil combined that override the smil animation in case of css support, i'm very close to success. If so, we will use it because it will assure us a full compatibility and a smooth transition from smil abandon to full css support.

ref: https://bugzilla.mozilla.org/show_bug.cgi?id=908634

[jancborchardt]

@skjnldsv yeah! Take charge and just go for it :) not so much discussion. If something doesn't work, we can still fix it going forward.

[skjnldsv]

Ok, then we close this one, let's review #24107.

I tried to mix both of them, but the firefox bug is too much.

[oparoz]

There is an alternative which would work in all browsers. Use a transparent PNG instead of a SVG.

It works because ownCloud uses a simple rotating spinner. Themes will have to patch ownCloud to use fancy CSS spinners.

[blackcrack]

and therefore would be pretty well, if exist in the css

.spinner { }

and the html code a

<div class='spinner'> </div>

to have later the possible for more easy change out the spinner in themes.

best regards
Blacky

[skjnldsv]

@oparoz and how will you make it spin?

@blackcrack we already have this! We have multiple class for the loader (loading, icon-loading, icon-loading-small...)

[oparoz]

@skjnldsv CSS3 with :before?

[oparoz]

@skjnldsv I initially thought the whole element could rotate, but that won't work of course, since in a lot of case the spinner is added as a background-image, so using :before should work, but then we'll end up with the same issues you've previously described with input fields.

[skjnldsv]

:before is great, but look at #19091 (comment)
It exclude all elements that are auto-closed. SInce css doesn't allow :before or :after.

The best solution if we use aft/bef, is to use two elemnts with border-radius, and make one rotate. Best result and best compatibility.
A single rotating png isn't really beautiful. :/

EDIT: I was too slow! :)
@oparoz we could also do have a js monitoring all .loading classes changes, and calculate/add a div that contains the loading data? I really don't like this idea, but it could work!

[oparoz]

we could also do have a js monitoring all .loading classes changes, and calculate/add a div that contains the loading data? I really don't like this idea, but it could work!

@skjnldsv That could work, but if using JS, why not simply use PNG sprites then?
http://codepen.io/sdholbs/pen/GyEDw

or even CSS only
https://jsfiddle.net/simurai/CGmCe/

[skjnldsv]

Because sprites are very heavy for the browser to render when animated, and a lot more bigger size! :/

[oparoz]

@skjnldsv - Reading Skimming through this thread, I don't think performance would be too much of an issue, it's not like there are dozens of spinner rotating at the same time. I also don't think it's going to be worse than animated SVGs.

Also, this PNG example is 1.4k (paste in the browser). Even if we want to include all 12 steps, that's 5.6k.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAADACAMAAACDB5U0AAAAMFBMVEUAAAD///////////////////////////////////////////////////////////87TQQwAAAAEHRSTlMAUQwWSGr/BSODz+iYN7ioo0T1UwAABSpJREFUeNrtmouSozgMRbFlYfn9/387FoaIJFAYU7s7W5Vb3ZOkMzrIliD2JdNPf79UCOpJPMxV8ABADKC7UakUOgLolHRPvPbz7OEbYI1SxvaMO4Qwu28AqUroAdg4VwR9ArSqgNQ3c5xC+QQkVaWnLrm5Esw7ADi+obqmMczZvgGMMjyFnVKcAu4B1JOAlZbLNQUPAtDmbQaPM0nZO9qecwqutXKAtYTwaihz1FG2BB88ru8spYTtZLK7ElqqLJWOAd6HrNZS1nZkGEBrwq2EwP3ItKMhBM+IuLxpciF5D4yB5ZG7gWlwWD3nlyS8g5NZ3sJPT6oUQ0McZNiyZyWYzmXaTBR7cHzDg1eGLpoBawIhHgOq6LobwflCx0OQwV8g7El2HeHjApGeTmX1Sx9ZmiwqUsSTQrLMezHzTl5qcFAHIQwCzOvno4G6hqBOhzDpgUn85wRndNsXjtEdn+7J0DVCq1hixtMa0EV8cqXEWE4A5upqQC28HA8Brq5HgLGG19+jj0C5Ip6Og1p4QVpeIb7SkLUFmbWLjj4XXMs+rVeVGNHyn+3b2sJS6+N0DChx+/zE6BwDQCng0lTRlgy/SIczGBW8njsXTaUiInOSMpI2JHl+csWyWAFYX2pE5Ed4P+rliWBiBaRJAG19AlOntKvCSQDy+d4nxQnQDtC7wtjPoJreAbZrjSMz6GAPuLfKAk4gTZ+AKfWmoFsTfgE0V7IDIKeBAJpAlkZ9EsCAngNkODT99NNPz2W8N0/iQTbiY6JQRbejYqQPgPgKHdI5hKy/AdA2ctcC3vPgNyD2+inWhYqgTwBxfOm7rHMK8ROQb/gxGCrBvAMUxzO1bxrXnZ8ArG/b8E4pTkHtAcgJYL9/wDv5DALgEs7+YtFNJeOrZ3ge3Vp7WEtoLvyD6LPPuL6zlFJvJxMsJTz1DwTA+yWzdlMIhWF6+YdHQFf+ARWfGeFSa/xIb2e16vAPMC9JZISDNWSXf0CuJVFo2D9I60w88A9U8dm7R/4B5vi/9A/0U/8g7kQD/kEsEl9cp39wDhjwD1IUOXroH9j/3j/Q0zP/QDnUD/wD46KLatw/wMg7nmH/AB0r4ph/oJVbDu9G/YMaykJaN5r6pn+wjr7RAdHJTF74BwKIbtvXGURUtvnB3f4BOvEPsCrJoW/7B6ol0A494B8krKJJAHf9A45XkwDu+geGASCAu/4BcLyZBNDnH4gUA7QAbvsHrYQCuO0ftBIK4L5/IH0igBH/QACjklYeFxnz8w9++umR5P6TGQ6Wjfi4yFfR7SjnthhgAMhasouli/dF7wFih3QNB3jPg98A125Fd2jZedEOIF8qiH2XdU7BfQLK3O/HIKeQ3gGm3Y3vky4VEO0eYJfvA+h+/ypnr/YA5ATUJLrYlMVKKCCNBKEmkKVQJ/0jK9S0llL71sqOE0gvoypkOrtNpLTMY9HbyQRLCTfzn72AfHmjKnsfxT+oTbiWUPmZ5Y9vlTUEtcZfHmVIpj3Oi4I5vdVYERH1d35LUePcdGrKEZaGOPwPKbRwr65vWLqjBH3LHu2Ff1ATKHgKiDB+09aEuaS+c8GeoOlv9g+S22nEP3B7YZ9/cAqIOOIfOBH+/AMwqB74BzZhlRn2D0hxvDOj/oHCRWrQPzDYlOyYf4BN29e30l3/QLXsSbZoN/0DJdnLJvGOfwAKk943PT3wDwwHPPAPSFWN+gdiFgz6B3K4Qf9ABjziH0gJh/0DKfq4f8C1f+QfQEo//+Cnf1t/AFGZQwaktm6jAAAAAElFTkSuQmCC

Having said that, we could still go with CSS only and use a gif for inputs since we have those for IE anyway.

[skjnldsv]

Css only is a good idea. Lighter and easier to maintain.
Here we go: http://codepen.io/skjnldsv/pen/qZgPQQ

[oparoz]

Looks good both on desktop and browser, no problem with speed.

[skjnldsv]

Seems good to me too! I updated with differents examples.
Will work on it tomorrow. Too tired this evening! :(

[oparoz]

Looks good, many thanks for the examples :)

[skjnldsv]

I'm zombying on the codepen until I fall asleep. i will integrate it on oc tomorrow.

[skjnldsv]

Done, please review!

[blackcrack]

@skjnldsv : it's maybe not bad, if be renamed ? into

/*spinner*/ 
.spinnerbig {} 
.spinnermedium {} 
.spinnersmall {} 

because, this name does more suitable ? .. also for the future, name it what it is .
and more easy for find.

best regards
Blacky

[skjnldsv]

Why? Don't really think this is that much of a deal :)
and I think icon-loading, icon-loading-small, icon-loading-dark and icon-loading-small-dark are pretty convenient names already ;)

[blackcrack]

it's spinn's and an icon is non spinning in normally case ;) s .. well, if you want search an specially icon, like an icon-loading instead a spinner, so, many fun g think about :) But, well you the Minion and the decisionmaker ;)

best regards
Blacky

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.