fix(loaders): fix Dot loader for IE11

[hzhu]

Description

This pull request fixes the Dot loader animation in Internet Explorer 11.

Detail

It looks like useCSSSVGAnimation is unreliable in determining if an SVG can be animated. In both Chrome 86 and Internet Explorer, useCSSSVGAnimation returns the same result. This is unexpected because Internet Explorer does not support SVG animations.

This PR removes useCSSSVGAnimation and replaces it with a working SVG animation check. It checks the transform property of the svg element to determine if SVG can be animated. In modern Chrome, Safari, Firefox, and Edge this check returns true indicating animation is supported. In IE11, the check returns false indicating the animation is not supported.

By using the correct boolean check, the Dot loader animates correctly across all browsers that are supported by Garden.

Verification Steps

❌ Before:

1. Open Internet Explorer 11
2. Navigate to the Dot loader Storybook example on the production site here
3. The Dot loader does not animate

✅ After:

1. Open Internet Explorer 11
2. Navigate to the Dot loader Storybook example on the "View Deployment" site here
3. The Dot loader does animate

Screenshots

❌ Before:

✅ After:

Checklist

• ⬅️ renders as expected with reversed (RTL) direction
• 🤘 renders as expected with Bedrock CSS (?bedrock)
• ♿ analyzed via axe and evaluated using VoiceOver
• 💂‍♂️ includes new unit tests
• 📝 tested in Chrome, Firefox, Safari, Edge, and IE11

[coveralls]

Coverage decreased (-0.003%) to 95.818% when pulling 7ecf4ab on hzhu/dots-ie11 into 7a99c96 on main.