.loading_spinner { background-color: #252526; background-image: image-url('pageflow/loading_spinner_glow.jpg'); background-repeat: no-repeat; background-position: center center; .loading_spinner_inner { left: 50%; top: 50%; width: 204px; height: 202px; margin-left: -102px; margin-top: -101px; position: absolute; z-index: 0; background-color: $main-color; animation: fadeInLoadingSpinner linear 2s; animation-iteration-count: 1; -webkit-animation: fadeInLoadingSpinner linear 2s; -webkit-animation-iteration-count: 1; -moz-animation: fadeInLoadingSpinner linear 2s; -moz-animation-iteration-count: 1; -o-animation: fadeInLoadingSpinner linear 2s; -o-animation-iteration-count: 1; -ms-animation: fadeInLoadingSpinner linear 2s; -ms-animation-iteration-count: 1; &:before { content: " "; width: 208px; height: 208px; position: absolute; background-image: image-url('pageflow/themes/#{$theme-name}/loading_spinner_bg.png'); z-index: 1; top:-2px; left: -2px; } div { width: 204px; height: 204px; position: absolute; background-image: image-url('pageflow/themes/#{$theme-name}/loading_spinner.png'); @include animation-duration (1.5s); @include animation-name(rotateSpinner); @include animation-iteration-count(infinite); @include animation-timing-function(linear); } } } @keyframes fadeInLoadingSpinner { 0% { opacity:0; } 48% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeInLoadingSpinner { 0% { opacity:0; } 48% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeInLoadingSpinner { 0% { opacity:0; } 48% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeInLoadingSpinner { 0% { opacity:0; } 48% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeInLoadingSpinner { 0% { opacity:0; } 48% { opacity:0; } 100% { opacity:1; } } @include keyframes(rotateSpinner) { from { @include transform(rotate(0deg)); } to { @include transform(rotate(359deg)); } } .js .vjs-default-skin { .vjs-loading-spinner { top: 8px; left: 10px; opacity: 1; width: 43px; height: 43px; margin-left: 0; margin-top: 0; @include fa-gear-icon; @include phone { } &:before { width: 43px; height: 43px; top: 0; left: 0; font-size: 43px; color: $main-color; background-image: none; } } }