Skip to content

Instantly share code, notes, and snippets.

@jameswilson

jameswilson/throbber.svg

Last active Sep 25, 2015
Embed
What would you like to do?
A basic rotating throbber.svg for Drupal 8
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path id="throbber" fill="#40B6ff" d="M17.943,5.046L16.564,5.91l-0.028,0.086c1.009,1.65,1.396,3.68,0.907,5.704 c-0.893,3.696-4.348,6.055-8.024,5.748c-0.668-0.056-0.47-0.527-0.47-0.527l0.3-1.241c0,0,0.051-0.486,0.62-0.463 c2.475,0.105,4.765-1.545,5.372-4.049c0.342-1.421,0.063-2.836-0.642-3.997l-0.096,0.031L12.848,8.24 c-0.564,0.354-0.916,0.11-0.779-0.543l0.748-3.585c0.136-0.653,0.776-1.055,1.424-0.893l3.553,0.889 C18.439,4.27,18.507,4.692,17.943,5.046z M7.228,11.636l-1.644,1.031l-0.04,0.013c-0.704-1.16-0.983-2.576-0.641-3.997 C5.51,6.179,7.8,4.529,10.275,4.634c0.569,0.024,0.62-0.463,0.62-0.463l0.301-1.241c0,0,0.197-0.471-0.471-0.527 C7.05,2.095,3.594,4.454,2.702,8.15c-0.489,2.024-0.102,4.054,0.907,5.704l-0.021,0.065L2.134,14.83 c-0.565,0.354-0.498,0.777,0.149,0.939l3.553,0.889c0.647,0.162,1.288-0.24,1.424-0.893l0.748-3.586 C8.144,11.525,7.793,11.282,7.228,11.636z"/>
<script>
window.onload = function() {
var el = document.getElementById("throbber"),
// Calculate the horizontal center (cx) and
// vertical center (cy) of the bounding box
// of the element being rotated.
bb = el.getBBox(),
bbx = bb.x,
bby = bb.y,
bbw = bb.width,
bbh = bb.height,
cx = bbx + 0.5 * bbw,
cy = bby + 0.5 * bbh,
angle = 0,
degrees = 20,
speed = 100
// Begin the element rotation.
svgRotator = setInterval (
function () {
angle -= degrees; el.setAttribute("transform","rotate("+angle+" "+cx+" "+cy+")");
}
, speed);
};
</script>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment