fix: Ad loading spinner animation misalignment

[roman-bc-dev]

Update contrib-ads implementation of the loading spinner component style to accommodate changes in videojs v8.11.x that cause a misalignment of the spinner segment animation before ad playback:

The contrib-ads implementation of an ad-specific spinner requires inherited rules from videojs and also a number of lines that were identical to videojs but became out of sync with recent updates. The inconsistency caused a minor visual defect, specifically because contrib-ads used display: block to make the spinner appear.

Fix parameters:

1. Update .vjs-ad-loading .vjs-loading-spinner style to include display:flex and expected justify/alignment rules to center the spinner segment pseudo-elements, to match changes from videojs.
2. Remove outdated css animation fallbacks to match videojs
3. Add animation: vjs-spinner-show rule to match videojs. This also includes built-in visibility
4. Remove extranuous border-top-color: rgb(255,255,255)
5. Consolidate and nest scss
6. Update the comment for context

Notes:

• These changes are backwards compatible with videojs v8.x
• To test locally:
  • render the basic-ad-plugin page
  • hit the play button
  • pause
  • run videojs('examplePlayer').addClass('vjs-ad-loading') in the console to make the spinner appear and animate