7 lines
14 KiB
CSS
7 lines
14 KiB
CSS
|
/*
|
||
|
|
waitMe - 1.19 [31.10.17]
|
||
|
|
Author: vadimsva
|
||
|
|
Github: https://github.com/vadimsva/waitMe
|
||
|
|
*/
|
||
|
|
.waitMe_container:not(body),body.waitMe_container .waitMe{transform:translateZ(0);backface-visibility:hidden}body.waitMe_container .waitMe{position:fixed;height:100vh}body.waitMe_container .waitMe .waitMe_content{top:50%!important;transform:none!important}.waitMe_container .waitMe{position:absolute;top:0;left:0;right:0;bottom:0;z-index:9989;text-align:center;overflow:hidden;cursor:wait}.waitMe_container .waitMe *{font-family:inherit;font-size:inherit;font-weight:initial;font-style:initial;line-height:initial;color:initial;text-decoration:initial;text-transform:initial;padding:initial;margin:initial}.waitMe_container .waitMe .waitMe_content{position:absolute;left:0;right:0;top:50%;backface-visibility:hidden}.waitMe_container .waitMe .waitMe_content.horizontal>.waitMe_progress{display:inline-block;vertical-align:middle}.waitMe_container .waitMe .waitMe_content.horizontal>.waitMe_text{display:inline-block;margin:0 0 0 20px;vertical-align:middle}.waitMe_container .waitMe .waitMe_progress{position:relative;font-size:0;line-height:0}.waitMe_container .waitMe .waitMe_progress>div{animation-fill-mode:both;display:inline-block;transform:translateZ(0);backface-visibility:hidden}.waitMe_container .waitMe .waitMe_text{position:relative;margin:20px 0 0}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{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);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);animation:working_body 2s infinite linear}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}@keyframes progress_body{0%{width:0}100%{width:100%}}@keyframes working_body{0%{left:-10%}100%{left:100%}}.waitMe_container .waitMe_progress.bounce>div{width:20px;height:20px;border-radius:50%;animation:bounce 1.4s infinite ease-in-out}.waitMe_container .waitMe_progress.bounce .waitMe_progress_elem1{animation-delay:-.32s}.waitMe_container .waitMe_progress.bounce .waitMe_progress_elem2{animation-delay:-.16s}@keyframes bounce{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}.waitMe_container .waitMe_progress.rotateplane>div{width:30px;height:30px;animation:rotateplane 1.2s infinite ease-in-out;backface-visibility:visible}@keyframes rotateplane{0%{transform:perspective(120px)}50%{transform:perspective(120px) rotateY(180deg)}100%{transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}.waitMe_container .waitMe_progress.stretch{height:60px}.waitMe_container .waitMe_progress.stretch>div{width:1px;height:100%;margin:0 4px;animation:stretch 1.2s infinite ease-in-out}.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem2{animation-delay:-1.1s}.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem3{animation-delay:-1s}.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem4{animation-delay:-.9s}.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem5{animation-delay:-.8s}@keyframes stretch{0%,100%,40%{transform:scaleY(.4)}20%{transform:scaleY(1)}}.waitMe_container .waitMe_progress.orbit{width:40px;height:40px;margin:auto;position:relative}.waitMe_container .waitMe_progress.orbit>div{width:100%;height:100%;margin:auto;top:0;left:0;position:absolute;animation:orbit_rotate 2s infinite linear}.waitMe_container .wait
|