fix(loading-spinner): border size costumization (videojs#8369)

amtins · web-flow · commit 1866118e6cd6 · 2023-12-04T14:26:55.000-05:00
Allows to change the border size of the `loading-spinner` component without having to reflect the border size in the pseudo-element margin.

- uses display `flex` to facilitate centering of pseudo-elements
- deletes the pseudo-elements `margin`
diff --git a/src/css/components/_loading.scss b/src/css/components/_loading.scss
@@ -22,7 +22,10 @@
 
 .vjs-seeking .vjs-loading-spinner,
 .vjs-waiting .vjs-loading-spinner {
-  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   // add a delay before actual show the spinner
   animation: vjs-spinner-show 0s linear 0.3s forwards;
 }
@@ -36,7 +39,6 @@
 .vjs-loading-spinner:after {
   content: "";
   position: absolute;
-  margin: -0.6em;
   box-sizing: inherit;
   width: inherit;
   height: inherit;
