Last active
August 29, 2015 14:06
-
-
Save joelpittet/c75ff7c2f86282ff9499 to your computer and use it in GitHub Desktop.
Throbber replacement
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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'); | |
| } |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If you want to change the colors just change the fill attributes in the SVGs, cheers.