@heff added a fancy loading spinner. closes videojs#2582

CHANGELOG.md

@@ -129,6 +129,7 @@ CHANGELOG
 * @forbesjo added Android and iOS browser testing ([view](https://github.com/videojs/video.js/pull/2538))
 * @heff improved css selector strengths ([view](https://github.com/videojs/video.js/pull/2583))
 * @heff moved scss vars to be private ([view](https://github.com/videojs/video.js/pull/2584))
+* @heff added a fancy loading spinner ([view](https://github.com/videojs/video.js/pull/2582))
 
 --------------------
 

grunt.js

@@ -74,13 +74,13 @@ module.exports = function(grunt) {
     },
     dist: {},
     watch: {
-      jshint: {
-        files: ['src/**/*', 'test/unit/**/*.js', 'Gruntfile.js'],
-        tasks: 'jshint'
-      },
       skin: {
         files: ['src/css/**/*'],
         tasks: 'sass'
+      },
+      jshint: {
+        files: ['src/**/*', 'test/unit/**/*.js', 'Gruntfile.js'],
+        tasks: 'jshint'
       }
     },
     connect: {

src/css/components/_loading.scss

@@ -1,64 +1,107 @@
 .vjs-loading-spinner {
   display: none;
-
   position: absolute;
   top: 50%;
   left: 50%;
+  margin: -25px 0 0 -25px;
+  opacity: 0.85;
 
-  font-size: 4em;
-  line-height: 1;
-
-  width: 1em;
-  height: 1em;
-
-  margin-left: -0.5em;
-  margin-top: -0.5em;
+  border: 6px solid rgba(113, 119, 129, 0.75);
+  // border: 6px solid rgba(43, 51, 63, 0.5);
 
-  opacity: 0.75;
-
-  @extend .vjs-icon-spinner;
+  box-sizing: border-box;
+  background-clip: padding-box;
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
 }
 
-/* Show the spinner when waiting for data and seeking to a new time */
-.vjs-waiting .vjs-loading-spinner,
-.vjs-seeking .vjs-loading-spinner {
+.vjs-seeking .vjs-loading-spinner,
+.vjs-waiting .vjs-loading-spinner {
   display: block;
+}
 
-  /* only animate when showing because it can be processor heavy *///
-  @include animation(spin 1.5s infinite linear);
+.vjs-loading-spinner:before,
+.vjs-loading-spinner:after {
+  content: "";
+  position: absolute;
+  margin: -6px;
+  box-sizing: inherit;
+  width: inherit;
+  height: inherit;
+  border-radius: inherit;
+  /* Keep 100% opacity so they don't show through each other */
+  opacity: 1;
+  border: inherit;
+  border-color: transparent;
+  border-top-color: white;
 }
 
-/* Errors are unrecoverable without user interaction so hide the spinner */
-.vjs-error .vjs-loading-spinner {
-  display: none;
+/* only animate when showing because it can be processor heavy */
+.vjs-seeking .vjs-loading-spinner:before,
+.vjs-seeking .vjs-loading-spinner:after,
+.vjs-waiting .vjs-loading-spinner:before,
+.vjs-waiting .vjs-loading-spinner:after {
+  -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
+  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
+}
 
-  /* ensure animation doesn't continue while hidden *///
-  @include animation(none);
+.vjs-seeking .vjs-loading-spinner:before,
+.vjs-waiting .vjs-loading-spinner:before {
+  border-top-color: rgb(255,255,255);
 }
 
-.video-js .vjs-loading-spinner:before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1em;
-  height: 1em;
-  text-align: center;
-  text-shadow: 0em 0em 0.1em $primary-bg;
+.vjs-seeking .vjs-loading-spinner:after,
+.vjs-waiting .vjs-loading-spinner:after {
+  border-top-color: rgb(255,255,255);
+  -webkit-animation-delay: 0.44s;
+  animation-delay: 0.44s;
 }
 
-@-moz-keyframes spin {
-  0% { -moz-transform: rotate(0deg); }
-  100% { -moz-transform: rotate(359deg); }
+@keyframes vjs-spinner-spin {
+  100% {
+    transform: rotate(360deg);
+  }
 }
-@-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(359deg); }
+
+@-webkit-keyframes vjs-spinner-spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
 }
-@-o-keyframes spin {
-  0% { -o-transform: rotate(0deg); }
-  100% { -o-transform: rotate(359deg); }
+
+@keyframes vjs-spinner-fade {
+  0% {
+    border-top-color: #a6aab0;
+  }
+  20% {
+    border-top-color: #a6aab0;
+  }
+  35% {
+    border-top-color: white;
+  }
+  60% {
+    border-top-color: #a6aab0;
+  }
+  100% {
+    border-top-color: #a6aab0;
+  }
 }
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(359deg); }
+
+@-webkit-keyframes vjs-spinner-fade {
+  0% {
+    border-top-color: #a6aab0;
+  }
+  20% {
+    border-top-color: #a6aab0;
+  }
+  35% {
+    border-top-color: white;
+  }
+  60% {
+    border-top-color: #a6aab0;
+  }
+  100% {
+    border-top-color: #a6aab0;
+  }
 }