.ok-loading { background: #fbfbfb; color:#333333; font-size:100%; margin:0; padding:0; position: fixed; top:0; left: 0; right: 0; bottom: 0; z-index: 999; } .loader { position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -mos-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); text-align:center; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; cursor:default } .text { position:absolute; left:-1.3em; top:-1.7em; white-space: nowrap; -webkit-animation:text 2s infinite; -moz-animation:text 2s infinite; -moz-animation:text 2s infinite; -ms-animation:text 2s infinite; -o-animation:text 2s infinite; animation:text 2s infinite } .vertical { position:absolute; top:-1.84em; left:-.4em; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg) } .horizontal { position:absolute; top:0; left:0; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } .circlesup { position:absolute; top:-4.7em; right:12.1em } .circlesdwn { position:absolute; top:2.5em; right:-13.5em; -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg) } .circle { position:absolute; width:15em; height:15em; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); -webkit-animation:orbit 2s infinite; -moz-animation:orbit 2s infinite; -moz-animation:orbit 2s infinite; -ms-animation:orbit 2s infinite; -o-animation:orbit 2s infinite; animation:orbit 2s infinite; z-index:5 } .circle:after { content:''; position:absolute; width:2em; height:2em; -webkit-border-radius:100%; -moz-border-radius:100%; -ms-border-radius:100%; -o-border-radius:100%; border-radius:100%; background:#13a3a5 } .circle:nth-child(2) { -webkit-animation-delay:100ms; -moz-animation-delay:100ms; -ms-animation-delay:100ms; -o-animation-delay:100ms; animation-delay:100ms; z-index:4 } .circle:nth-child(2):after { background:#56bebf; -webkit-transform:scale(.8, .8); -moz-transform:scale(.8, .8); -ms-transform:scale(.8, .8); -o-transform:scale(.8, .8); transform:scale(.8, .8) } .circle:nth-child(3) { -webkit-animation-delay:225ms; -moz-animation-delay:225ms; -ms-animation-delay:225ms; -o-animation-delay:225ms; animation-delay:225ms; z-index:3 } .circle:nth-child(3):after { background:#ffa489; -webkit-transform:scale(.6, .6); -moz-transform:scale(.6, .6); -ms-transform:scale(.6, .6); -o-transform:scale(.6, .6); transform:scale(.6, .6) } .circle:nth-child(4) { -webkit-animation-delay:350ms; -moz-animation-delay:350ms; -ms-animation-delay:350ms; -o-animation-delay:350ms; animation-delay:350ms; z-index:2 } .circle:nth-child(4):after { background:#ff6d37; -webkit-transform:scale(.4, .4); -moz-transform:scale(.4, .4); -ms-transform:scale(.4, .4); -o-transform:scale(.4, .4); transform:scale(.4, .4) } .circle:nth-child(5) { -webkit-animation-delay:475ms; -moz-animation-delay:475ms; -ms-animation-delay:475ms; -o-animation-delay:475ms; animation-delay:475ms; z-index:1 } .circle:nth-child(5):after { background:#db2f00; -webkit-transform:scale(.2, .2); -moz-transform:scale(.2, .2); -ms-transform:scale(.2, .2); -o-transform:scale(.2, .2); transform:scale(.2, .2) } @-webkit-keyframes orbit { 0% { -webkit-transform:rotate(45deg) } 5% { -webkit-transform:rotate(45deg); -webkit-animation-timing-function:ease-out } 70% { -webkit-transform:rotate(405deg); -webkit-animation-timing-function:ease-in } 100% { -webkit-transform:rotate(405deg) } } @-moz-keyframes orbit { 0% { -moz-transform:rotate(45deg) } 5% { -moz-transform:rotate(45deg); -moz-animation-timing-function:ease-out } 70% { -moz-transform:rotate(405deg); -moz-animation-timing-function:ease-in } 100% { -moz-transform:rotate(405deg) } } @-ms-keyframes orbit { 0% { -ms-transform:rotate(45deg) } 5% { -ms-transform:rotate(45deg); -ms-animation-timing-function:ease-out } 70% { -ms-transform:rotate(405deg); -ms-animation-timing-function:ease-in } 100% { -ms-transform:rotate(405deg) } } @-o-keyframes orbit { 0% { -o-transform:rotate(45deg) } 5% { -o-transform:rotate(45deg); -o-animation-timing-function:ease-out } 70% { -o-transform:rotate(405deg); -o-animation-timing-function:ease-in } 100% { -o-transform:rotate(405deg) } } @keyframes orbit { 0% { transform:rotate(45deg) } 5% { transform:rotate(45deg); animation-timing-function:ease-out } 70% { transform:rotate(405deg); animation-timing-function:ease-in } 100% { transform:rotate(405deg) } } @-webkit-keyframes text { 0% { -webkit-transform:scale(.2, .2); -webkit-animation-timing-function:ease-out } 40%, 60% { -webkit-transform:scale(1, 1); -webkit-animation-timing-function:ease-out } 70%, 100% { -webkit-transform:scale(.2, .2) } } @-moz-keyframes text { 0% { -moz-transform:scale(.2, .2); -moz-animation-timing-function:ease-out } 50% { -moz-transform:scale(1, 1); -moz-animation-timing-function:ease-out } 60% { -moz-transform:scale(1, 1); -moz-animation-timing-function:ease-out } 100% { -moz-transform:scale(.2, .2) } } @-o-keyframes text { 0% { -o-transform:scale(.2, .2); -o-animation-timing-function:ease-out } 50% { -o-transform:scale(1, 1); -o-animation-timing-function:ease-out } 60% { -o-transform:scale(1, 1); -o-animation-timing-function:ease-out } 100% { -o-transform:scale(.2, .2) } } @keyframes text { 0% { transform:scale(.2, .2); animation-timing-function:ease-out } 50% { transform:scale(1, 1); animation-timing-function:ease-out } 60% { transform:scale(1, 1); animation-timing-function:ease-out } 100% { transform:scale(.2, .2) } }