/* waitMe - 1.12 [12.05.15] Author: vadimsva Github: https://github.com/vadimsva/waitMe */ .waitMe_container {position:relative;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden} body.waitMe_container {position:fixed;width:100%;height:100%} .waitMe_container .waitMe {position:absolute;top:0;left:0;right:0;bottom:0;z-index:9989;text-align:center} .waitMe_container .waitMe * {font-family:sans-serif;font-size:14px;font-weight:initial;font-style:initial;color:initial;text-decoration:initial;text-transform:initial;padding:initial;margin:initial} .waitMe_container .waitMe .waitMe_content {position:absolute;width:100%;top:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden} .waitMe_container .waitMe .waitMe_progress {position:relative} .waitMe_container .waitMe .waitMe_progress > div {-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block} .waitMe_container .waitMe .waitMe_text {position:relative;margin:20px 0 0} /* before load animation */ body.waitMe_body {overflow:hidden;height:100%} body.waitMe_body.hideMe {transition:opacity .2s ease-in-out;opacity:0} body.waitMe_body .waitMe_container:not([data-waitme_id]) {position:fixed;z-index:9989;top:0;bottom:0;left:0;right:0;background:#fff} body.waitMe_body .waitMe_container:not([data-waitme_id]) > div {-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute} body.waitMe_body .waitMe_container.progress > div { width:0;height:3px;top:0;left:0;background:#000;box-shadow:-5px 0 5px 2px rgba(0,0,0,.2); -webkit-animation: progress_body 7s infinite ease-out; animation: progress_body 7s infinite ease-out; } body.waitMe_body .waitMe_container.working > div { width:10%;height:3px;top:0;left:-10%;background:#000;box-shadow:-5px 0 5px 2px rgba(0,0,0,.2); -webkit-animation: working_body 2s infinite ease-in-out; animation: working_body 2s infinite ease-in-out; } body.waitMe_body .waitMe_container.progress > div:after {content:'';position:absolute;top:0;bottom:60%;right:0;width:60px;border-radius:50%;opacity:.5;transform:rotate(3deg);box-shadow:#000 1px 0 6px 1px} body.waitMe_body .waitMe_container.img > div {width:100%;height:100%;text-align:center;background-position:center!important;background-repeat:no-repeat!important} body.waitMe_body .waitMe_container.text > div {width:100%;top:45%;text-align:center} @-webkit-keyframes progress_body { 0% {width:0} 100% {width:100%} } @keyframes progress_body { 0% {width:0} 100% {width:100%} } @-webkit-keyframes working_body { 0% {left:-10%} 100% {left:100%} } @keyframes working_body { 0% {left:-10%} 100% {left:100%} } /* bounce */ .waitMe_container .waitMe_progress.bounce > div { width:20px;height:20px;border-radius:50%; -webkit-animation: bounce 1.4s infinite ease-in-out; animation: bounce 1.4s infinite ease-in-out; } .waitMe_container .waitMe_progress.bounce .waitMe_progress_elem1 { -webkit-animation-delay:-.32s; animation-delay:-.32s; } .waitMe_container .waitMe_progress.bounce .waitMe_progress_elem2 { -webkit-animation-delay:-.16s; animation-delay:-.16s; } @-webkit-keyframes bounce { 0%, 80%, 100% { -webkit-transform:scale(0); } 40% { -webkit-transform:scale(1); } } @keyframes bounce { 0%, 80%, 100% { transform:scale(0); } 40% { transform:scale(1); } } /* rotateplane */ .waitMe_container .waitMe_progress.rotateplane > div { width:30px;height:30px; -webkit-animation:rotateplane 1.2s infinite ease-in-out; animation:rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(120px); } 50% { -webkit-transform: perspective(120px) rotateY(180deg); } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } @keyframes rotateplane { 0% { transform: perspective(120px); } 50% { transform: perspective(120px) rotateY(180deg); } 100% { transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } /* stretch */ .waitMe_container .waitMe_progress.stretch > div { width:8px;height:60px;margin:1px; -webkit-animation: stretch 1.2s infinite ease-in-out; animation: stretch 1.2s infinite ease-in-out; } .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem3 { -webkit-animation-delay: -1s; animation-delay: -1s; } .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem4 { -webkit-animation-delay: -.9s; animation-delay: -.9s; } .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem5 { -webkit-animation-delay: -.8s; animation-delay: -.8s; } @-webkit-keyframes stretch { 0%, 40%, 100% { -webkit-transform: scaleY(.4); } 20% { -webkit-transform: scaleY(1); } } @keyframes stretch { 0%, 40%, 100% { transform: scaleY(.4); } 20% { transform: scaleY(1); } } /* orbit */ .waitMe_container .waitMe_progress.orbit { width:40px;height:40px;margin:auto; -webkit-animation: orbit_rotate 2s infinite linear; animation: orbit_rotate 2s infinite linear; } .waitMe_container .waitMe_progress.orbit > div { width:50%;height:50%;border-radius:50%;top:0;position:absolute; -webkit-animation: orbit 2s infinite ease-in-out; animation: orbit 2s infinite ease-in-out; } .waitMe_container .waitMe_progress.orbit .waitMe_progress_elem2 { top:auto;bottom:0; -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes orbit_rotate { 100% { -webkit-transform: rotate(360deg); } } @keyframes orbit_rotate { 100% { transform: rotate(360deg); } } @-webkit-keyframes orbit { 0%, 100% { -webkit-transform: scale(0); } 50% { -webkit-transform: scale(1); } } @keyframes orbit { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } /* roundBounce */ .waitMe_container .waitMe_progress.roundBounce {width:60px;height:60px;margin:auto} .waitMe_container .waitMe_progress.roundBounce > div { width:20%;height:20%;border-radius:50%;position:absolute; -webkit-animation: roundBounce 1.2s infinite ease-in-out; animation: roundBounce 1.2s infinite ease-in-out; } .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem1 {top:0;left:0} .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem2 {top:0;right:0} .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem3 {bottom:0;right:0} .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem4 {bottom:0;left:0} .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem5 {top:-9%;left:50%;margin-top:-10%;margin-left:-10%} .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem6 {top:50%;right:-9%;margin-top:-10%;margin-right:-10%} .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem7 {bottom:-9%;left:50%;margin-bottom:-10%;margin-left:-10%} .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem8 {top:50%;left:-9%;margin-top:-10%;margin-left:-10%} .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem9 {top:0;right:0} .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem10 {bottom:0;right:0} .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem11 {bottom:0;left:0} .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem12 {top:0;left:0} .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem5 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem9 { -webkit-animation-delay: -1s; animation-delay: -1s; } .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem2 { -webkit-animation-delay: -.9s; animation-delay: -.9s; } .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem6 { -webkit-animation-delay: -.8s; animation-delay: -.8s; } .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem10 { -webkit-animation-delay: -.7s; animation-delay: -.7s; } .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem3 { -webkit-animation-delay: -.6s; animation-delay: -.6s; } .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem7 { -webkit-animation-delay: -.5s; animation-delay: -.5s; } .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem11 { -webkit-animation-delay: -.4s; animation-delay: -.4s; } .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem4 { -webkit-animation-delay: -.3s; animation-delay: -.3s; } .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem8 { -webkit-animation-delay: -.2s; animation-delay: -.2s; } .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem12 { -webkit-animation-delay: -.1s; animation-delay: -.1s; } @-webkit-keyframes roundBounce { 0%, 80%, 100% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } @keyframes roundBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* win8 */ .waitMe_container .waitMe_progress.win8 {height:40px;margin:auto} .waitMe_container .waitMe_progress.win8 > div { width:40px;height:40px;opacity:0;position:absolute;margin:auto;left:0;right:0; -webkit-transform: rotate(225deg); -webkit-animation: win8 5.5s infinite; transform: rotate(225deg); animation: win8 5.5s infinite; } .waitMe_container .waitMe_progress.win8 > div > div {width:15%;height:15%;border-radius:50%;position:absolute;margin:-12.5%} .waitMe_container .waitMe_progress.win8 .waitMe_progress_elem2 { -webkit-animation-delay: .24s; animation-delay: .24s; } .waitMe_container .waitMe_progress.win8 .waitMe_progress_elem3 { -webkit-animation-delay: .48s; animation-delay: .48s; } .waitMe_container .waitMe_progress.win8 .waitMe_progress_elem4 { -webkit-animation-delay: .72s; animation-delay: .72s; } .waitMe_container .waitMe_progress.win8 .waitMe_progress_elem5 { -webkit-animation-delay: .96s; animation-delay: .96s; } @-webkit-keyframes win8 { 0% { -webkit-transform:rotate(225deg); -webkit-animation-timing-function: ease-out; } 7% { opacity:1; -webkit-transform:rotate(345deg); -webkit-animation-timing-function: linear; } 30% { -webkit-transform:rotate(455deg); -webkit-animation-timing-function: ease-in-out; } 39% { -webkit-transform:rotate(690deg); -webkit-animation-timing-function: linear; } 70% { opacity:1; -webkit-transform:rotate(815deg); -webkit-animation-timing-function: ease-out; } 75% { -webkit-transform:rotate(945deg); -webkit-animation-timing-function: ease-out; } 76% { opacity:0; -webkit-transform:rotate(945deg); } 100% { opacity:0; -webkit-transform:rotate(945deg); } } @keyframes win8 { 0% { transform:rotate(225deg); animation-timing-function: ease-out; } 7% { opacity:1; transform:rotate(345deg); animation-timing-function: linear; } 30% { transform:rotate(455deg); animation-timing-function: ease-in-out; } 39% { transform:rotate(690deg); animation-timing-function: linear; } 70% { opacity:1; transform:rotate(815deg); animation-timing-function: ease-out; } 75% { transform:rotate(945deg); animation-timing-function: ease-out; } 76% { opacity:0; transform:rotate(945deg); } 100% { opacity:0; transform:rotate(945deg); } } /* win8_linear */ .waitMe_container .waitMe_progress.win8_linear {margin:auto;width:150px;height:6px} .waitMe_container .waitMe_progress.win8_linear > div { width:100%;height:100%;left:0;opacity:0;position:absolute; -webkit-animation: win8_linear 3s infinite; animation: win8_linear 3s infinite; } .waitMe_container .waitMe_progress.win8_linear > div > div {width:4%;height:100%;border-radius:50%} .waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem2 { -webkit-animation-delay: .3s; animation-delay: .3s; } .waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem3 { -webkit-animation-delay: .6s; animation-delay: .6s; } .waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem4 { -webkit-animation-delay: .9s; animation-delay: .9s; } .waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem5 { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } @-webkit-keyframes win8_linear { 0% { -webkit-transform: translateX(0); -webkit-animation-timing-function: ease-out; } 10% { opacity:1; -webkit-transform: translateX(33.333%); -webkit-animation-timing-function: linear; } 50% { opacity:1; -webkit-transform: translateX(53.333%); -webkit-animation-timing-function: ease-in-out; } 60% { opacity:0; -webkit-transform: translateX(86.666%); } } @keyframes win8_linear { 0% { transform: translateX(0); animation-timing-function: ease-out; } 10% { opacity:1; transform: translateX(33.333%); animation-timing-function: linear; } 50% { opacity:1; transform: translateX(53.333%); animation-timing-function: ease-in-out; } 60% { opacity:0; transform: translateX(86.666%); } } /* ios */ .waitMe_container .waitMe_progress.ios {margin:auto;width:40px;height:40px} .waitMe_container .waitMe_progress.ios > div { width:10%;height:26%;position:absolute;left:44.5%;top:37%;opacity:0;border-radius:50px;box-shadow:0 0 3px rgba(0,0,0,.2); -webkit-animation: ios 1s linear infinite; animation: ios 1s linear infinite; } .waitMe_container .waitMe_progress.ios .waitMe_progress_elem1 { -webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s; transform:rotate(0deg) translate(0, -142%); animation-delay: 0s; } .waitMe_container .waitMe_progress.ios .waitMe_progress_elem2 { -webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -.9167s; transform:rotate(30deg) translate(0, -142%); animation-delay: -.9167s; } .waitMe_container .waitMe_progress.ios .waitMe_progress_elem3 { -webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -.833s; transform:rotate(60deg) translate(0, -142%); animation-delay: -.833s; } .waitMe_container .waitMe_progress.ios .waitMe_progress_elem4 { -webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -.75s; transform:rotate(90deg) translate(0, -142%); animation-delay: -.75s; } .waitMe_container .waitMe_progress.ios .waitMe_progress_elem5 { -webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -.667s; transform:rotate(120deg) translate(0, -142%); animation-delay: -.667s; } .waitMe_container .waitMe_progress.ios .waitMe_progress_elem6 { -webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -.5833s; transform:rotate(150deg) translate(0, -142%); animation-delay: -.5833s; } .waitMe_container .waitMe_progress.ios .waitMe_progress_elem7 { -webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -.5s; transform:rotate(180deg) translate(0, -142%); animation-delay: -.5s; } .waitMe_container .waitMe_progress.ios .waitMe_progress_elem8 { -webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -.41667s; transform:rotate(210deg) translate(0, -142%); animation-delay: -.41667s; } .waitMe_container .waitMe_progress.ios .waitMe_progress_elem9 { -webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -.333s; transform:rotate(240deg) translate(0, -142%); animation-delay: -.333s; } .waitMe_container .waitMe_progress.ios .waitMe_progress_elem10 { -webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s; transform:rotate(270deg) translate(0, -142%); animation-delay: -.25s; } .waitMe_container .waitMe_progress.ios .waitMe_progress_elem11 { -webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -.1667s; transform:rotate(300deg) translate(0, -142%); animation-delay: -.1667s; } .waitMe_container .waitMe_progress.ios .waitMe_progress_elem12 { -webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -.0833s; transform:rotate(330deg) translate(0, -142%); animation-delay: -.0833s; } @-webkit-keyframes ios { 0% { opacity: 1; } 100% { opacity: .25; } } @keyframes ios { 0% { opacity: 1; } 100% { opacity: .25; } } /* facebook */ .waitMe_container .waitMe_progress.facebook {margin:auto} .waitMe_container .waitMe_progress.facebook > div { width:6px;height:25px;margin-left:3px; -webkit-animation: facebook 1.3s linear infinite; animation: facebook 1.3s linear infinite; } .waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem1 { -webkit-animation-delay:.39s; animation-delay:.39s; -webkit-transform:scale(.7); opacity:.3 } .waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem2 { -webkit-animation-delay:.52s; animation-delay:.52s; -webkit-transform:scale(.85); opacity:.4 } .waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem3 { -webkit-animation-delay:.65s; animation-delay:.65s; -webkit-transform:scale(1); opacity:.5 } @-webkit-keyframes facebook { 0% { -webkit-transform:scale(.7); opacity:.1; } 1% { -webkit-transform:scale(1.2); opacity:1; } 100% { -webkit-transform:scale(.7); opacity:.1; } } @keyframes facebook { 0% { transform:scale(.7); opacity:.1; } 1% { transform:scale(1.2); opacity:1; } 100% { transform:scale(.7); opacity:.1; } } /* rotation */ .waitMe_container .waitMe_progress.rotation > div { width:60px;height:60px;margin:auto;border-radius:100%;border-width:6px;border-style:solid; border-left-color:transparent!important; border-right-color:transparent!important; border-bottom-color:transparent!important; -webkit-animation: rotation 1s infinite linear; animation: rotation 1s infinite linear; } @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* timer */ .waitMe_container .waitMe_progress.timer {width:40px;height:40px;margin:auto;border-width:4px;border-style:solid;border-radius:50%;box-sizing:border-box;position:relative;text-indent:-9999px} .waitMe_container .waitMe_progress.timer > .waitMe_progress_elem1 { border-radius:3px;position:absolute;width:4px;height:48%;left:50%;top:50%;margin-left:-2px;margin-top:-2px; -webkit-animation: timer 1.25s infinite linear; animation: timer 1.25s infinite linear; -webkit-transform-origin: 2px 2px; transform-origin: 2px 2px; } .waitMe_container .waitMe_progress.timer > .waitMe_progress_elem2 { border-radius:3px;position:absolute;width:4px;height:40%;left:50%;top:50%;margin-left:-2px;margin-top:-2px; -webkit-animation: timer 15s infinite linear; animation: timer 15s infinite linear; -webkit-transform-origin: 2px 2px; transform-origin: 2px 2px; } @-webkit-keyframes timer { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes timer { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* pulse */ .waitMe_container .waitMe_progress.pulse { width:30px;height:30px;margin:auto;border-width:3px;border-style:solid;border-radius:50%;position:relative;opacity:0; -webkit-animation: pulsate 1s ease-out; animation: pulsate 1s ease-out; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; } @-webkit-keyframes pulsate { 0% { -webkit-transform:scale(.1); opacity:0; } 50% { opacity:1; } 100% { -webkit-transform:scale(1.2); opacity:0; } } @keyframes pulsate { 0% { transform:scale(.1); opacity:0; } 50% { opacity:1; } 100% { transform:scale(1.2); opacity:0; } } /* progressBar */ .waitMe_container .waitMe_progress.progressBar {width:200px;height:20px;margin:auto;background:rgba(0,0,0,.1);padding:5px;border-radius:20px;line-height:0} .waitMe_container .waitMe_progress.progressBar > div { width:100%;height:100%;overflow:hidden;border-radius:20px;background-size:50px 50px; -webkit-animation: progressBar 2s linear infinite; animation: progressBar 2s linear infinite; box-shadow: inset 0 2px 9px rgba(255,255,255,.3), inset 0 -2px 6px rgba(0,0,0,.4); background-image: linear-gradient(-45deg, rgba(240,240,240,.4) 25%, transparent 25%, transparent 50%, rgba(240,240,240,.4) 50%, rgba(240,240,240,.4) 75%, transparent 75%, transparent); } @-webkit-keyframes progressBar { 0% { background-position:0 0; } 100% { background-position:50px 50px; } } @keyframes progressBar { 0% { background-position:0 0; } 100% { background-position:50px 50px; } } /* bouncePulse */ .waitMe_container .waitMe_progress.bouncePulse > div { width:20px;height:20px;margin-right:1%;display:inline-block;border-radius:50%; -webkit-animation: bouncePulse 1.4s infinite ease-in-out; animation: bouncePulse 1.4s infinite ease-in-out; -webkit-transform: scale(.5); } .waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem1, .waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem3 { -webkit-animation-delay: .3s; animation-delay: .3s; } .waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem2 { -webkit-animation-delay: .1s; animation-delay: .1s; } @-webkit-keyframes bouncePulse { 0%, 90%, 100% { -webkit-transform: scale(.5); } 45% { -webkit-transform: scale(1); } } @keyframes bouncePulse { 0%, 90%, 100% { -transform: scale(.5); } 45% { -transform: scale(1); } }