diff --git a/jquery_loadinganimation.css b/jquery_loadinganimation.css index 0ff6ff26f24bcc8b984f86da5507d3b0f27ea18e..1ee3e4975a92b79d447d239276cf1c084765a48b 100644 --- a/jquery_loadinganimation.css +++ b/jquery_loadinganimation.css @@ -1,169 +1,169 @@ -/* Animation */ -/* -- Moving Bar */ -@-webkit-keyframes loadinganimation-moving-bar { - 0% { - background-position:0 0; - opacity:0; - } - 35% { - background-position:-700px 0; - opacity:1.0; - } - 100% { - background-position:-1400px 0; - opacity:0; - } -} -@-moz-keyframes loadinganimation-moving-bar { - 0% { - background-position:0 0; - opacity:0; - } - 35% { - background-position:-700px 0; - opacity:1.0; - } - 100% { - background-position:-1400px 0; - opacity:0; - } -} -@-o-keyframes loadinganimation-moving-bar { - 0% { - background-position:0 0; - opacity:0; - } - 35% { - background-position:-700px 0; - opacity:1.0; - } - 100% { - background-position:-1400px 0; - opacity:0; - } -} -@keyframes loadinganimation-moving-bar { - 0% { - background-position:0 0; - opacity:0; - } - 35% { - background-position:-700px 0; - opacity:1.0; - } - 100% { - background-position:-1400px 0; - opacity:0; - } -} - -/* -- Blinking Text */ -@-webkit-keyframes loadinganimation-blinking-text { - 0% { - opacity:1.0; - } - 50% { - opacity:0.3; - } - 100% { - opacity:1.0; - } -} -@-moz-keyframes loadinganimation-blinking-text { - 0% { - opacity:1.0; - } - 50% { - opacity:0.3; - } - 100% { - opacity:1.0; - } -} -@-o-keyframes loadinganimation-blinking-text { - 0% { - opacity:1.0; - } - 50% { - opacity:0.3; - } - 100% { - opacity:1.0; - } -} -@keyframes loadinganimation-blinking-text { - 0% { - opacity:1.0; - } - 50% { - opacity:0.3; - } - 100% { - opacity:1.0; - } -} - -#loadinganimation { - position: fixed; - width: 100%; - height:100%; - z-index: 999; - top: 0; - left: 0; - text-align: center; - color: #000; - font-weight: bold; - font-size: 0.85em; - cursor: wait; - background: rgba(0, 0, 0, 0.5); -} - -#loadinganimation .loadinganimation-box { - position:absolute; - - /* vertical and horizontal centered */ - width:50%; - height:50px; - left:50%; - top:50%; - margin-top:-40px; - margin-left:-25%; - border-radius:35px; - border:10px solid rgba(255,255,255,0.6); -} -#loadinganimation .loadinganimation-outer{ - background:#b6e026; - border:1px solid #c9f23e; - border-radius:25px; - box-shadow:0 0 3px rgba(0,0,0,0.3); -} - -#loadinganimation .loadinganimation-inner{ - border-radius:25px; - height:48px; - - background: -moz-linear-gradient(left, rgba(237,255,175,0) 0%, rgba(237,255,175,0) 17%, rgba(237,255,175,0.3) 42%, rgba(237,255,175,0.75) 46%, rgba(237,255,175,0.65) 56%, rgba(237,255,175,0) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(237,255,175,0)), color-stop(17%,rgba(237,255,175,0)), color-stop(42%,rgba(237,255,175,0.3)), color-stop(46%,rgba(237,255,175,0.75)), color-stop(56%,rgba(237,255,175,0.65)), color-stop(100%,rgba(237,255,175,0))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(left, rgba(237,255,175,0) 0%,rgba(237,255,175,0) 17%,rgba(237,255,175,0.3) 42%,rgba(237,255,175,0.75) 46%,rgba(237,255,175,0.65) 56%,rgba(237,255,175,0) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(left, rgba(237,255,175,0) 0%,rgba(237,255,175,0) 17%,rgba(237,255,175,0.3) 42%,rgba(237,255,175,0.75) 46%,rgba(237,255,175,0.65) 56%,rgba(237,255,175,0) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(left, rgba(237,255,175,0) 0%,rgba(237,255,175,0) 17%,rgba(237,255,175,0.3) 42%,rgba(237,255,175,0.75) 46%,rgba(237,255,175,0.65) 56%,rgba(237,255,175,0) 100%); /* IE10+ */ - background: linear-gradient(to right, rgba(237,255,175,0) 0%,rgba(237,255,175,0) 17%,rgba(237,255,175,0.3) 42%,rgba(237,255,175,0.75) 46%,rgba(237,255,175,0.65) 56%,rgba(237,255,175,0) 100%); /* W3C */ - - -webkit-animation: loadinganimation-moving-bar 3s linear infinite; /* Safari 4+ */ - -moz-animation: loadinganimation-moving-bar 3s linear infinite; /* Fx 5+ */ - -o-animation: loadinganimation-moving-bar 3s linear infinite; /* Opera 12+ */ - animation: loadinganimation-moving-bar 3s linear infinite; /* IE 10+ */ -} -#loadinganimation .loading-text{ - display:block; - text-align:center; - color:#fff; - position:relative; - z-index:99; - margin-top:-35px; - - -webkit-animation: loadinganimation-blinking-text 1s linear infinite; /* Safari 4+ */ - -moz-animation: loadinganimation-blinking-text 1s linear infinite; /* Fx 5+ */ - -o-animation: loadinganimation-blinking-text 1s linear infinite; /* Opera 12+ */ - animation: loadinganimation-blinking-text 1s linear infinite; /* IE 10+ */ +/* Animation */ +/* -- Moving Bar */ +@-webkit-keyframes loadinganimation-moving-bar { + 0% { + background-position:0 0; + opacity:0; + } + 35% { + background-position:-700px 0; + opacity:1.0; + } + 100% { + background-position:-1400px 0; + opacity:0; + } +} +@-moz-keyframes loadinganimation-moving-bar { + 0% { + background-position:0 0; + opacity:0; + } + 35% { + background-position:-700px 0; + opacity:1.0; + } + 100% { + background-position:-1400px 0; + opacity:0; + } +} +@-o-keyframes loadinganimation-moving-bar { + 0% { + background-position:0 0; + opacity:0; + } + 35% { + background-position:-700px 0; + opacity:1.0; + } + 100% { + background-position:-1400px 0; + opacity:0; + } +} +@keyframes loadinganimation-moving-bar { + 0% { + background-position:0 0; + opacity:0; + } + 35% { + background-position:-700px 0; + opacity:1.0; + } + 100% { + background-position:-1400px 0; + opacity:0; + } +} + +/* -- Blinking Text */ +@-webkit-keyframes loadinganimation-blinking-text { + 0% { + opacity:1.0; + } + 50% { + opacity:0.3; + } + 100% { + opacity:1.0; + } +} +@-moz-keyframes loadinganimation-blinking-text { + 0% { + opacity:1.0; + } + 50% { + opacity:0.3; + } + 100% { + opacity:1.0; + } +} +@-o-keyframes loadinganimation-blinking-text { + 0% { + opacity:1.0; + } + 50% { + opacity:0.3; + } + 100% { + opacity:1.0; + } +} +@keyframes loadinganimation-blinking-text { + 0% { + opacity:1.0; + } + 50% { + opacity:0.3; + } + 100% { + opacity:1.0; + } +} + +#loadinganimation { + position: fixed; + width: 100%; + height:100%; + z-index: 999; + top: 0; + left: 0; + text-align: center; + color: #000; + font-weight: bold; + font-size: 0.85em; + cursor: pointer; + background: rgba(0, 0, 0, 0.5); +} + +#loadinganimation .loadinganimation-box { + position:absolute; + + /* vertical and horizontal centered */ + width:50%; + height:50px; + left:50%; + top:50%; + margin-top:-40px; + margin-left:-25%; + border-radius:35px; + border:10px solid rgba(255,255,255,0.6); +} +#loadinganimation .loadinganimation-outer{ + background:#b6e026; + border:1px solid #c9f23e; + border-radius:25px; + box-shadow:0 0 3px rgba(0,0,0,0.3); +} + +#loadinganimation .loadinganimation-inner{ + border-radius:25px; + height:48px; + + background: -moz-linear-gradient(left, rgba(237,255,175,0) 0%, rgba(237,255,175,0) 17%, rgba(237,255,175,0.3) 42%, rgba(237,255,175,0.75) 46%, rgba(237,255,175,0.65) 56%, rgba(237,255,175,0) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(237,255,175,0)), color-stop(17%,rgba(237,255,175,0)), color-stop(42%,rgba(237,255,175,0.3)), color-stop(46%,rgba(237,255,175,0.75)), color-stop(56%,rgba(237,255,175,0.65)), color-stop(100%,rgba(237,255,175,0))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, rgba(237,255,175,0) 0%,rgba(237,255,175,0) 17%,rgba(237,255,175,0.3) 42%,rgba(237,255,175,0.75) 46%,rgba(237,255,175,0.65) 56%,rgba(237,255,175,0) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, rgba(237,255,175,0) 0%,rgba(237,255,175,0) 17%,rgba(237,255,175,0.3) 42%,rgba(237,255,175,0.75) 46%,rgba(237,255,175,0.65) 56%,rgba(237,255,175,0) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(left, rgba(237,255,175,0) 0%,rgba(237,255,175,0) 17%,rgba(237,255,175,0.3) 42%,rgba(237,255,175,0.75) 46%,rgba(237,255,175,0.65) 56%,rgba(237,255,175,0) 100%); /* IE10+ */ + background: linear-gradient(to right, rgba(237,255,175,0) 0%,rgba(237,255,175,0) 17%,rgba(237,255,175,0.3) 42%,rgba(237,255,175,0.75) 46%,rgba(237,255,175,0.65) 56%,rgba(237,255,175,0) 100%); /* W3C */ + + -webkit-animation: loadinganimation-moving-bar 3s linear infinite; /* Safari 4+ */ + -moz-animation: loadinganimation-moving-bar 3s linear infinite; /* Fx 5+ */ + -o-animation: loadinganimation-moving-bar 3s linear infinite; /* Opera 12+ */ + animation: loadinganimation-moving-bar 3s linear infinite; /* IE 10+ */ +} +#loadinganimation .loading-text{ + display:block; + text-align:center; + color:#fff; + position:relative; + z-index:99; + margin-top:-35px; + + -webkit-animation: loadinganimation-blinking-text 1s linear infinite; /* Safari 4+ */ + -moz-animation: loadinganimation-blinking-text 1s linear infinite; /* Fx 5+ */ + -o-animation: loadinganimation-blinking-text 1s linear infinite; /* Opera 12+ */ + animation: loadinganimation-blinking-text 1s linear infinite; /* IE 10+ */ } \ No newline at end of file