diff options
Diffstat (limited to 'themes/greydragon/css/waitMe.css')
| -rw-r--r-- | themes/greydragon/css/waitMe.css | 753 |
1 files changed, 753 insertions, 0 deletions
diff --git a/themes/greydragon/css/waitMe.css b/themes/greydragon/css/waitMe.css new file mode 100644 index 0000000..cda25fc --- /dev/null +++ b/themes/greydragon/css/waitMe.css @@ -0,0 +1,753 @@ +/* +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); + } +} |