SVG spinners

[silverwind]

These are really ugly right now:

I ponder if we should add them to our existing class for inverting images, or if you plan to redo these gifs.

I'd love seeing them converted to APNG, but that would screw Chrome users without the APNG addon :P

[Mottie]

Hmm, yeah the 16x16 icon really looks horrible... I actually inverted them in photoshop, so you are seeing the result hang head

[silverwind]

In case you're working on these: We could provide a 32x32 instead of a 16x16, and then scale them down 50% in CSS so that they'll look nice on 200% zoom (Retina etc.) too. Or even better yet, provide SVG icons.

[Mottie]

Well here is the 64x64 image

http://stylishthemes.github.io/Github-Dark/images/octocat-spinner-64-dark.gif

and 32x32 image

http://stylishthemes.github.io/Github-Dark/images/octocat-spinner-32-dark.gif

Hmm, yeah inverting the image in photoshop didn't work out so good...

[silverwind]

I'd say we provide one clean spinner image, preferably SVG (SMIL) or at least 128x128 and let the browser do the scaling.

I'll have a look at doing it in SMIL. Gives me a reason to finally learn it :P

[silverwind]

Actually, let's not do it in SMIL, that language is just atrocious. I'll most likely do it in plain SVG with CSS animation.

[Mottie]

I'm working on a cleaner gif version.

[Mottie]

I've added a 128x128 version (not currently used)

and a new 16x16 version

[ddavison]

can this issue be closed? this looks great

[silverwind]

Not yet! I'm looking to do them through SVG+CSS animation. But go ahead and commit these right now, its certainly an improvement.

[silverwind]

Almost done! Just have to figure out why it isn't looping correctly.

http://codepen.io/silverwind/details/ocxpD

Hope you like my almost-symmetrical octocat :D

[Mottie]

LOL nice... you know, it's just a loading icon, it doesn't have to be exactly the same ;)

[silverwind]

Yeah, it was a nice exercise nonetheless. Also, I suck at coming up with something creative for a loading icon :)

[ddavison]

nice! haha. how the heck did you find the paths for doing octocat?!?

[silverwind]

@ddavison: By hard work in the svg editor :)

Also, It's done, animation-delay made the keyframes a lot simpler: http://codepen.io/silverwind/details/ocxpD

I'll look to integrate it into the style later.

[ddavison]

doesn't seem to be working from chrome.. you might need to add -moz-animation and -webkit-animation

[silverwind]

Indeed, but it's not about prefixes. Probably Chrome doesn't like my animation syntax.

[silverwind]

Alright, fixed in Chrome too: http://codepen.io/silverwind/details/ocxpD

It choked on my animation shorthand as expected :P

[ddavison]

curious, will this CSS be included in the github-dark stylesheet? If so, we can have the fade-to color be their theme color!

[ddavison]

same with the fill: on #cat ! 👍 that'd look niiiice.

[silverwind]

That should be trivial. The hard part now is get it scaled correctly.

[ddavison]

it's extremely trivial, just popping out suggestions :)

[silverwind]

I know :) I'll be sure to include colored spinners!

[silverwind]

Been trying to get these svg spinners in, but I guess I've hit the limits of CSS here. If I load the svg as an background-image I can't seem to select the svg elements for animation purposes.

I see two possible solutions to this:

• Try it with SMIL (Uncertain if it will animate when set as background-image).
• Convert the Userstyle into a Userscript and replace the spinner images with the svg through JS. This would give us svg directly in the markup which certainly can be animated.

[auscompgeek]

This might be a silly question, but would it be possible to load the SVG in an :after's content?

[silverwind]

I'm sure that's possible but it seems that SVGs loaded as an image (either through , or as CSS background) are treated as static images and can't be animated. The only way to animate it through CSS is to load it inline in HTML.

I'm still pondering if it's worth switching the style to a script for this, or alternatively, provide a small addon-script that complements the style.

[silverwind]

Continued in StylishThemes/GitHub-Dark-Script#2