Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.This came up in #1069152-70: Throbber in textfield is misaligned when browser hardware acceleration enabled (gfx) by @sun, so all credits for the idea go to him...
...I wonder why this is an animated GIF in the first place?
→ If we'd consider to put the throbber next to the input element (instead of inside), then CSS3 is simple as this:
.throbber { animation: throbber-rotation 1s infinite linear; } @keyframes throbber-rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }cf. http://jsfiddle.net/uv8a5/
See also:
http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit
http://aino.github.io/throbber.js/
http://onwebdev.blogspot.com/2011/01/css3-background-rotate-property.html
http://blog.freeside.co/post/42357804660/css-background-transformations
Comments
Comment #1
LewisNymanOne of the problems we came across with #1847916: Replace the ajax-progress-throbber div with a class is you can't animate pseudo elements, and some elements don't even support pseudo elements.
It means we can't have both of these nice things. Personally I'd rather make it easier for people to override the throbber than make the core one more performant, assuming that CSS animation is more performant than a gif.
Comment #2
LewisNymanComment #3
sunIt's not only more performant, it also scales automatically.
Best collection + implementations I've seen so far: http://projects.lukehaas.me/css-loaders/
Comment #4
Anonymous (not verified) CreditAttribution: Anonymous commentedComment #5
Anonymous (not verified) CreditAttribution: Anonymous commentedI've had a look at what this entails. I'm coming round to the idea that the benefits don't outweigh the potential issues involved. For example, for the quickedit module, this means adding a span inside the button and controlling its appearance with the button's classes, but there are other icons in the module and I think it would be a bit convoluted to have different sets of button markup and js behaviours for the sake of animation.
It would probably mean a lot of tooling about with field UI and other things too, so I'm siding with leaner markup here (agree with Lewis).
Comment #6
LewisNymanYes, we can't have both this and #1847916: Replace the ajax-progress-throbber div with a class.
@sun What do you think? We need to decide on a direction.
Comment #7
sunUsing a background image within a form input element is wrong and a stone-age way to approach animations.
I disagree with #1847916: Replace the ajax-progress-throbber div with a class, because it continues (and hardens) the problematic implementation. An animated throbber is a separate and unique interaction element, which should be positioned and sized/scaled on its own. You don't implement progress bars by tacking classes on arbitrary other elements either.
The fact that we're discovering potentially problematic areas in module X only means that our current code is too hard-wired to a particular implementation.
@JamesLefrère: Curious, did you actually try out some code? If you did, it would be very helpful to see that (doesn't matter if it's quick'n'dirty).
Comment #8
LewisNymanIt seems like we are making good progress on #1847916: Replace the ajax-progress-throbber div with a class. I think this issue is confusing to keep open.
Comment #9
jwilson3I'd like to see this reopened because currently the throbber-active.gif is not animated, we're trying to move to SVG, and for SVG animation/rotations to work, we need this issue implemented.
Comment #10
joelpittetWe were working on this issue over here: #1974928: Update throbber icon come join the party;)