Fix Spinner component bug in Safari

[slhinyc]

• Fix for ForeignObject element not working as expected in Safari
• Replaced element with svg circle and linearGradient combo.
• Tested on Browserstack and on my own devices (MacBook, iPhone, iPad). Everything looks good except there are some inconsistencies between Browserstack & my local devices (see below for details). Also cannot verify that Safari on Windows 11 looks okay (page won't load).

Test details

Some inconsistencies and issues with Safari on Windows 11, but otherwise all good.

Tested locally (on my MacOS)

• Safari
• Arc
• Firefox
• Chrome

Tested in Browserstack

Windows 11

• Edge 120
• Firefox 120
• Chrome 120
• Opera 105
• Safari 5.1
  • The entire doc site is broken on Safari 5 on Windows. Looks like the CSS isn't loading at all. Can only get the site to run locally. Shoelace.style and the Vercel review app won't open at all.

iOS

• Safari on iPhone 12 & iPhone 15
• Chrome on iPhone 15
• Safari on iPad 8th gen
• Chrome on iPad 8th gen
• When I test with Browserstack on iPad Chrome and Safari, I'm seeing an odd CSS translate issue that inconsistently messes with the spinning animation. But when I test locally on my own iPad, everything works as expected

Android

• Chrome on Galaxy S23
• Chrome on Pixel 6 Pro
• Edge on Pixel 6 Pro

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
shoelace	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 21, 2024 7:02pm

[CrookedGrin]

Looks good, thanks for jumping on this!