Style ajax throbber with Rivet Loading Indicator

I recreated the asset here: https://loading.io/asset/703007

Inactive:

Active:

Here is an animated SVG version sized to 88px by 88px:

<svg xmlns="http://www.w3.org/2000/svg" style="shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="88" height="88" viewBox="0 0 100 100"><circle cx="50" cy="50" fill="none" stroke="#006298" stroke-width="11" r="44" stroke-dasharray="210 70" style="animation-play-state: running; animation-delay: 0s;"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.8s" values="0 50 50;360 50 50" keyTimes="0;1" style="animation-play-state: running; animation-delay: 0s;"></animateTransform></circle></svg>

And a version ready for CSS:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='shape-rendering: auto; animation-play-state: running; animation-delay: 0s;' width='88' height='88' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' fill='none' stroke='%23006298' stroke-width='11' r='44' stroke-dasharray='210 70' style='animation-play-state: running; animation-delay: 0s;'%3E%3CanimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='0.8s' values='0 50 50;360 50 50' keyTimes='0;1' style='animation-play-state: running; animation-delay: 0s;'%3E%3C/animateTransform%3E%3C/circle%3E%3C/svg%3E");

Automatically closed - issue fixed for 2 weeks with no activity.