web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-11-24 08:42:25 +02:00
Code Releases Activity

@heff added a fancy loading spinner. closes #2582

Browse Source
This commit is contained in:
heff 2015-09-14 18:29:06 -07:00
parent 517489513f
commit 85b825a0dd
3 changed files with 93 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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))
--------------------

8
grunt.js
View File

@ -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: {

133
src/css/components/_loading.scss
View File

@ -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;
border: 6px solid rgba(113, 119, 129, 0.75);
// border: 6px solid rgba(43, 51, 63, 0.5);
width: 1em;
height: 1em;
margin-left: -0.5em;
margin-top: -0.5em;
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);
}
/* Errors are unrecoverable without user interaction so hide the spinner */
.vjs-error .vjs-loading-spinner {
display: none;
/* ensure animation doesn't continue while hidden *///
@include animation(none);
}
.video-js .vjs-loading-spinner:before {
.vjs-loading-spinner:before,
.vjs-loading-spinner:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
text-align: center;
text-shadow: 0em 0em 0.1em $primary-bg;
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;
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
/* 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;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
.vjs-seeking .vjs-loading-spinner:before,
.vjs-waiting .vjs-loading-spinner:before {
border-top-color: rgb(255,255,255);
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
.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;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
@keyframes vjs-spinner-spin {
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes vjs-spinner-spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@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;
}
}
@-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;
}
}