feat(css): add a delay before showing loading spinner (#4806)

videojs · Dec 14, 2017 · f47a083 · f47a083
1 parent 0fa8c84
commit f47a083
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/src/css/components/_loading.scss b/src/css/components/_loading.scss
@@ -17,11 +17,14 @@
   width: 50px;
   height: 50px;
   border-radius: 25px;
+  visibility: hidden;
 }
 
 .vjs-seeking .vjs-loading-spinner,
 .vjs-waiting .vjs-loading-spinner {
   display: block;
+  // add a delay before actual show the spinner
+  animation: 0s linear 0.3s forwards vjs-spinner-show;
 }
 
 .vjs-loading-spinner:before,
@@ -61,6 +64,18 @@
   animation-delay: 0.44s;
 }
 
+@keyframes vjs-spinner-show {
+  to {
+    visibility: visible;
+  }
+}
+
+@-webkit-keyframes vjs-spinner-show {
+  to {
+    visibility: visible;
+  }
+}
+
 @keyframes vjs-spinner-spin {
   100% {
     transform: rotate(360deg);