Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-37363

Animated SVG spinner icon

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Won't Do
    • Icon: Minor Minor
    • None
    • 2.4
    • JavaScript, Themes
    • MOODLE_24_STABLE

      The icons got an overhaul in Moodle 2.4, but the spinner gif that appears when, for example, hiding or showing an activity by clicking on the eye icon seems to have been overlooked.

      https://moodle.org/pix/i/loading_small.gif

      (There's also a larger one, but i'm not sure where that is used, an SVG icon can of course be used at several sizes).

      There's the slight complication that, since spinners are generally animated, that you can't fall back to PNG as the other new icons do, but even if some browsers fall back to the existing gif or a static PNG of one animation frame, it would be an improvement for the users of modern browser such as IE9, and Retina iPads etc.

      As an added bonus, these files are also generally smaller than animated gifs, and work on multiple background colors, unlike the current gif which is hardcoded to be used against a white background due to limitations in alpha support in the GIF format.

      Some example spinners:

      http://www.vzhurudolu.cz/css3/src/spinner_animated.svg
      http://rendro.github.com/SVG-Spinner/

      And since Moodle already has some fairly advanced infrastructure for delivering the right image type to different browsers simply dropping an appropriately named "i/loading_small.svg" next to the gif appears to work nicely.

      I tested this out with this file:
      https://github.com/kvakes/spinner.svg/blob/master/spinner.svg

      And it just worked.

            moodle.com Moodle HQ
            bawjaws David Scotson
            Votes:
            5 Vote for this issue
            Watchers:
            10 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.