Throbber replacement

_autocomplete.base.scss

// Animated throbber
html.js .form-autocomplete {
  background-image: image-url('svg/throbber-inactive.svg');
  background-position: 95% center;
  background-position: -webkit-calc(100% - 5px) center;
  background-position: calc(100% - 5px) center;
  background-repeat: no-repeat;
}

html.js .throbbing {
  background-image: image-url('svg/throbber.svg');
}

throbber-inactive.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<g>
  <g>
    <path fill="#CCCCCC" d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M8.1,13.3c-2.9,0-5.3-2.4-5.3-5.3s2.4-5.3,5.3-5.3
      C11,2.6,13.4,5,13.4,8S11,13.3,8.1,13.3z"/>
  </g>
</g>
</svg>

throbber.svg

If you want to change the colors just change the fill attributes in the SVGs, cheers.

I've forked to allow both inactive and active throbber scale to larger sizes more easily, either in CSS using background-size, or by simply changing the hardcoded width and height attributes currently set to 16x16 inside the <svg> tag without having to actually adjust the SVG paths in an SVG editor. I did this by setting the viewBox in the inactive throbber to match that of the active throbber at a resolution of 300 by 300. I've also updated the inactive throbber to use a circle with transparent fill and a gray stroke to create the donut shape, instead of using paths, which shaved quite a few bytes off the filesize.