client/src/sass/player/spinner.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 // Thanks: https://projects.lukehaas.me/css-loaders/
   5 .vjs-loading-spinner {
   6   left: 50%;
   7   font-size: 10px;
   8   text-indent: -9999em;
   9   border: 0.7em solid rgba(255, 255, 255, 0.2);
  10   border-left-color: #ffffff;
  11   transform: translateZ(0);
  12   animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important;
  13   overflow: hidden;
  14   visibility: hidden;
  15
  16   &::before {
  17     animation: none !important;
  18   }
  19
  20   &::after {
  21     border-radius: 50%;
  22     width: 6em;
  23     height: 6em;
  24     animation: none !important;
  25   }
  26
  27   @keyframes spinner {
  28     0% {
  29       transform: rotate(0deg);
  30     }
  31     100% {
  32       transform: rotate(360deg);
  33     }
  34   }
  35
  36   @keyframes vjs-spinner-show {
  37     0% {
  38       display: none;
  39       opacity: 0;
  40     }
  41
  42     1% {
  43       display: block;
  44       visibility: visible;
  45       opacity: 0;
  46     }
  47
  48     100% {
  49       display: block;
  50       visibility: visible;
  51       opacity: 1;
  52     }
  53   }
  54 }