@charset "UTF-8"; @font-face { font-family: "fuelux-preloader"; src:url("../fonts/fuelux-preloader.eot"); src:url("../fonts/fuelux-preloader.eot?#iefix") format("embedded-opentype"), url("../fonts/fuelux-preloader.ttf") format("truetype"), url("../fonts/fuelux-preloader.svg#fuelux-preloader") format("svg"), url("../fonts/fuelux-preloader.woff") format("woff"); font-weight: normal; font-style: normal; } @keyframes fuelux-preloader-1 { 0% {opacity: 1;} 12.4% {opacity: 1;} 12.5% {opacity: 0;} 100% {opacity: 0;} } @-webkit-keyframes fuelux-preloader-1 { 0% {opacity: 1;} 12.4% {opacity: 1;} 12.5% {opacity: 0;} 100% {opacity: 0;} } @keyframes fuelux-preloader-2 { 0% {opacity: 0;} 12.4% {opacity: 0;} 12.5% {opacity: 1;} 24.9% {opacity: 1;} 25% {opacity: 0;} 100% {opacity: 0;} } @-webkit-keyframes fuelux-preloader-2 { 0% {opacity: 0;} 12.4% {opacity: 0;} 12.5% {opacity: 1;} 24.9% {opacity: 1;} 25% {opacity: 0;} 100% {opacity: 0;} } @keyframes fuelux-preloader-3 { 0% {opacity: 0;} 24.9% {opacity: 0;} 25% {opacity: 1;} 37.4% {opacity: 1;} 37.5% {opacity: 0;} 100% {opacity: 0;} } @-webkit-keyframes fuelux-preloader-3 { 0% {opacity: 0;} 24.9% {opacity: 0;} 25% {opacity: 1;} 37.4% {opacity: 1;} 37.5% {opacity: 0;} 100% {opacity: 0;} } @keyframes fuelux-preloader-4 { 0% {opacity: 0;} 37.4% {opacity: 0;} 37.5% {opacity: 1;} 49.4% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 0;} } @-webkit-keyframes fuelux-preloader-4 { 0% {opacity: 0;} 37.4% {opacity: 0;} 37.5% {opacity: 1;} 49.4% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 0;} } @keyframes fuelux-preloader-5 { 0% {opacity: 0;} 49.4% {opacity: 0;} 50% {opacity: 1;} 62.4% {opacity: 1;} 62.5% {opacity: 0;} 100% {opacity: 0;} } @-webkit-keyframes fuelux-preloader-5 { 0% {opacity: 0;} 49.4% {opacity: 0;} 50% {opacity: 1;} 62.4% {opacity: 1;} 62.5% {opacity: 0;} 100% {opacity: 0;} } @keyframes fuelux-preloader-6 { 0% {opacity: 0;} 62.4% {opacity: 0;} 62.5% {opacity: 1;} 74.9% {opacity: 1;} 75% {opacity: 0;} 100% {opacity: 0;} } @-webkit-keyframes fuelux-preloader-6 { 0% {opacity: 0;} 62.4% {opacity: 0;} 62.5% {opacity: 1;} 74.9% {opacity: 1;} 75% {opacity: 0;} 100% {opacity: 0;} } @keyframes fuelux-preloader-7 { 0% {opacity: 0;} 74.9% {opacity: 0;} 75% {opacity: 1;} 87.4% {opacity: 1;} 87.5% {opacity: 0;} 100% {opacity: 0;} } @-webkit-keyframes fuelux-preloader-7 { 0% {opacity: 0;} 74.9% {opacity: 0;} 75% {opacity: 1;} 87.4% {opacity: 1;} 87.5% {opacity: 0;} 100% {opacity: 0;} } @keyframes fuelux-preloader-8 { 0% {opacity: 0;} 87.4% {opacity: 0;} 87.5% {opacity: 1;} 87.6% {opacity: 1;} 100% {opacity: 0;} 100% {opacity: 0;} } @-webkit-keyframes fuelux-preloader-8 { 0% {opacity: 0;} 87.4% {opacity: 0;} 87.5% {opacity: 1;} 87.6% {opacity: 1;} 100% {opacity: 0;} 100% {opacity: 0;} } .preloader { height: 64px; font-size: 64px; position: relative; width: 64px; &.iefix span, &:before, b, i { font-family: "fuelux-preloader" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } &:before { content: "0"; left: 0; opacity: 0.33; position: absolute; top: 0; } &.iefix { &:before { display: none; } b { display: block; left: 0; position: absolute; top: 0; } i { display: none; &:after, &:before { display: none; } } span { display: block; font-size: inherit; height: 100%; left: 0; opacity: 0.33; position: absolute; top: 0; width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); } } i { &:after, &:before { display: block; left: 0; opacity: 0; position: absolute; top: 0; animation: 1s steps(8) infinite normal running; animation-timing-function: linear; animation-play-state: running; -webkit-animation: 1s steps(8) infinite normal running; -webkit-animation-timing-function: linear; -webkit-animation-play-state: running; } &:nth-child(1){ &:before { content: "1"; animation-name: fuelux-preloader-1; -webkit-animation-name: fuelux-preloader-1; } &:after { content: "2"; animation-name: fuelux-preloader-2; -webkit-animation-name: fuelux-preloader-2; } } &:nth-child(2){ &:before { content: "3"; animation-name: fuelux-preloader-3; -webkit-animation-name: fuelux-preloader-3; } &:after { content: "4"; animation-name: fuelux-preloader-4; -webkit-animation-name: fuelux-preloader-4; } } &:nth-child(3){ &:before { content: "5"; animation-name: fuelux-preloader-5; -webkit-animation-name: fuelux-preloader-5; } &:after { content: "6"; animation-name: fuelux-preloader-6; -webkit-animation-name: fuelux-preloader-6; } } &:nth-child(4){ &:before { content: "7"; animation-name: fuelux-preloader-7; -webkit-animation-name: fuelux-preloader-7; } &:after { content: "8"; animation-name: fuelux-preloader-8; -webkit-animation-name: fuelux-preloader-8; } } } }