Loading spinner is rotating off center

[magicznyleszek]

Description

The spinner spins around a point that is a tiny bit off-center:

We could design a square one, that doesn't rely on rotating.

Sidenote: performance-wise CSS spinners are ok: https://github.com/h5bp/lazyweb-requests/issues/103

[joshuaberetta]

@magicznyleszek is this still an issue with the new spinner?

[magicznyleszek]

I was wrong and this is still an issue. The things I found out during debugging:

1. I thought this has to do with the source size of svg icons (these changed and are now 280px, with older version of webfonts-generator we had to keep it over 1000px as glyphs were corrupted during conversion), but I tried resizing all icons and it didn't change anything
2. The thing that helped with spinning issue was changing the size of the spinner icon itself (so spinner.svg was 1000x1000px and other icons stay 280x280px), but this is not acceptable as all the other icons are renderer off center and smaller (proportionally).
3. I tried very simple designs based on simple circle, but this only proved that the issue is not with the icon design itself.

If you add some styles to generated icons, it is clear that SVG design that is perfectly in center is rendered a bit lower than it should:

[magicznyleszek]

The solution would be one of:

1. drop icon font and use all icons as svgs, without webfonts-generator the issue will be gone
2. move spinner outside the k-icons flow and make it a completely separate thing

I lean towards 1. as it should and will happen eventually, and with 2. we need to update all the places that use spinner icon currently.

[magicznyleszek]

There is also a bit separate idea to not use the regular spinning spinner, but use another loading animation inspired by our new logo, e.g.: