3 ms·

I've made this before [1], here are at least a few reasons: - smoother than GIFs - GIFs don't have full alpha transparency - much easier to customize and ada

by exogen 12y ago

I've made this before [1], here are at least a few reasons: - smoother than GIFs - GIFs don't have full alpha transparency - much easier to customize and adapt to different themes/sites/etc. [1] http://brianbeck.com/spinner/ http://brianbeck.com/spinner/

Vektorweg 12y ago
And why not SVG?
- exogen 12y ago
  I'm not sure, because I haven't tried it, but: assume the markup and scripts are locked down, and you're only offered CSS as a means to theme a site's look & feel – how then would the SVG markup get on the page? Such was the case for our customers' sites at the company where I made this: everyone got the same markup in their widget, and changing that (for example, to add some SVG elements) was a more involved release process than just updating their CSS overrides.
  - oxplot 12y ago
    Not 100% sure, but if you inline an SVG in HTML, you should be able to style it using CSS the usual way.
    - exogen 12y ago
      True, that is my understanding as well – still, though, requires that you have that SVG in your HTML in the first place. The CSS approach (in my link anyway, not necessarily OP's) can be incorporated without any updates to your existing markup – even without adding a single DIV.
laumars 12y ago
I think you could make similar arguments against the use of CSS. eg: - plays nicer on lower end hardware (I actually don't buy that CSS is smoother than GIF. I think it's 50/50 depending on how the GIF was designed (eg # frames, delay between frames, frame overlay method, etc), the hardware the GIF / CSS is rendered on, the browser running the CSS, etc. - GIF works uniformly on all platforms (bar console-based browsers obviously hehe) - and to expand on your second point, it doesn't seem like you're using alpha transparency on half your examples anyway. Anyhow, it wasn't my intention to be negative. There's some stylish work there and it shows you've gone to a lot of effort. I particularly like the Pac-Man example. Unfortunately though (and to reiterate an early point) sadly quite a few examples failed to animate. Below is my full user agent string, and a map of the examples that worked and failed, in case it helps you with future developments: Mozilla/5.0 (X11; Linux x86_64; rv:36.0) Gecko/20100101 Firefox/36.0 A A X X X X A X X X X X X A A A X X X X X A A X A A A == Animated X == not animated == empty spot (failed animation?)
- exogen 12y ago
  Unfortunately I'm not the OP. I only designed the unrelated demo in my comment (which does use alpha transparency btw to blend in with whatever background color/image one might use).
  - laumars 12y ago
    Ahh my apologies then :)

by exogen 12y ago

Vektorweg 12y ago

And why not SVG?

exogen 12y ago
I'm not sure, because I haven't tried it, but: assume the markup and scripts are locked down, and you're only offered CSS as a means to theme a site's look & feel – how then would the SVG markup get on the page? Such was the case for our customers' sites at the company where I made this: everyone got the same markup in their widget, and changing that (for example, to add some SVG elements) was a more involved release process than just updating their CSS overrides.
- oxplot 12y ago
  Not 100% sure, but if you inline an SVG in HTML, you should be able to style it using CSS the usual way.
  - exogen 12y ago
    True, that is my understanding as well – still, though, requires that you have that SVG in your HTML in the first place. The CSS approach (in my link anyway, not necessarily OP's) can be incorporated without any updates to your existing markup – even without adding a single DIV.

laumars 12y ago

I think you could make similar arguments against the use of CSS. eg: - plays nicer on lower end hardware (I actually don't buy that CSS is smoother than GIF. I think it's 50/50 depending on how the GIF was designed (eg # frames, delay between frames, frame overlay method, etc), the hardware the GIF / CSS is rendered on, the browser running the CSS, etc. - GIF works uniformly on all platforms (bar console-based browsers obviously hehe) - and to expand on your second point, it doesn't seem like you're using alpha transparency on half your examples anyway. Anyhow, it wasn't my intention to be negative. There's some stylish work there and it shows you've gone to a lot of effort. I particularly like the Pac-Man example. Unfortunately though (and to reiterate an early point) sadly quite a few examples failed to animate. Below is my full user agent string, and a map of the examples that worked and failed, in case it helps you with future developments: Mozilla/5.0 (X11; Linux x86_64; rv:36.0) Gecko/20100101 Firefox/36.0 A A X X X X A X X X X X X A A A X X X X X A A X A A A == Animated X == not animated == empty spot (failed animation?)

exogen 12y ago
Unfortunately I'm not the OP. I only designed the unrelated demo in my comment (which does use alpha transparency btw to blend in with whatever background color/image one might use).
- laumars 12y ago
  Ahh my apologies then :)