Split player sass file

1 files changed, 54 insertions, 0 deletions

diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss
new file mode 100644
index 000000000..a6af8da33
--- /dev/null
+++ b/client/src/sass/player/spinner.scss
@@ -0,0 +1,54 @@
+@import '_variables';
+@import '_mixins';
+
+// Thanks: https://projects.lukehaas.me/css-loaders/
+.vjs-loading-spinner {
+  left: 50%;
+  font-size: 10px;
+  text-indent: -9999em;
+  border: 0.7em solid rgba(255, 255, 255, 0.2);
+  border-left-color: #ffffff;
+  transform: translateZ(0);
+  animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important;
+  overflow: hidden;
+  visibility: hidden;
+
+  &::before {
+    animation: none !important;
+  }
+
+  &::after {
+    border-radius: 50%;
+    width: 6em;
+    height: 6em;
+    animation: none !important;
+  }
+
+  @keyframes spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes vjs-spinner-show {
+    0% {
+      display: none;
+      opacity: 0;
+    }
+
+    1% {
+      display: block;
+      visibility: visible;
+      opacity: 0;
+    }
+
+    100% {
+      display: block;
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}
\ No newline at end of file