yaffs.net Git - yaffs-website/blob - node_modules/video.js/src/css/components/_loading.scss

   1 .vjs-loading-spinner {
   2   display: none;
   3   position: absolute;
   4   top: 50%;
   5   left: 50%;
   6   margin: -25px 0 0 -25px;
   7   opacity: 0.85;
   8
   9   // Need to fix centered page layouts
  10   text-align: left;
  11
  12   border: 6px solid rgba($primary-background-color, $primary-background-transparency);
  13   // border: 6px solid rgba(43, 51, 63, 0.5);
  14
  15   box-sizing: border-box;
  16   background-clip: padding-box;
  17   width: 50px;
  18   height: 50px;
  19   border-radius: 25px;
  20 }
  21
  22 .vjs-seeking .vjs-loading-spinner,
  23 .vjs-waiting .vjs-loading-spinner {
  24   display: block;
  25 }
  26
  27 .vjs-loading-spinner:before,
  28 .vjs-loading-spinner:after {
  29   content: "";
  30   position: absolute;
  31   margin: -6px;
  32   box-sizing: inherit;
  33   width: inherit;
  34   height: inherit;
  35   border-radius: inherit;
  36   // Keep 100% opacity so they don't show through each other
  37   opacity: 1;
  38   border: inherit;
  39   border-color: transparent;
  40   border-top-color: white;
  41 }
  42
  43 // only animate when showing because it can be processor heavy
  44 .vjs-seeking .vjs-loading-spinner:before,
  45 .vjs-seeking .vjs-loading-spinner:after,
  46 .vjs-waiting .vjs-loading-spinner:before,
  47 .vjs-waiting .vjs-loading-spinner:after {
  48   -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
  49   animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
  50 }
  51
  52 .vjs-seeking .vjs-loading-spinner:before,
  53 .vjs-waiting .vjs-loading-spinner:before {
  54   border-top-color: rgb(255,255,255);
  55 }
  56
  57 .vjs-seeking .vjs-loading-spinner:after,
  58 .vjs-waiting .vjs-loading-spinner:after {
  59   border-top-color: rgb(255,255,255);
  60   -webkit-animation-delay: 0.44s;
  61   animation-delay: 0.44s;
  62 }
  63
  64 @keyframes vjs-spinner-spin {
  65   100% {
  66     transform: rotate(360deg);
  67   }
  68 }
  69
  70 @-webkit-keyframes vjs-spinner-spin {
  71   100% {
  72     -webkit-transform: rotate(360deg);
  73   }
  74 }
  75
  76 @keyframes vjs-spinner-fade {
  77   0% {
  78     border-top-color: $secondary-background-color;
  79   }
  80   20% {
  81     border-top-color: $secondary-background-color;
  82   }
  83   35% {
  84     border-top-color: white;
  85   }
  86   60% {
  87     border-top-color: $secondary-background-color;
  88   }
  89   100% {
  90     border-top-color: $secondary-background-color;
  91   }
  92 }
  93
  94 @-webkit-keyframes vjs-spinner-fade {
  95   0% {
  96     border-top-color: $secondary-background-color;
  97   }
  98   20% {
  99     border-top-color: $secondary-background-color;
 100   }
 101   35% {
 102     border-top-color: white;
 103   }
 104   60% {
 105     border-top-color: $secondary-background-color;
 106   }
 107   100% {
 108     border-top-color: $secondary-background-color;
 109   }
 110 }