Skip to content
Snippets Groups Projects
Commit 80f909e0 authored by Julian Pustkuchen's avatar Julian Pustkuchen
Browse files

Issue #[2360469] by jukka792: Changed cursor:wait to cursor:pointer to make... 

Issue #[2360469] by jukka792: Changed cursor:wait to cursor:pointer to make the layer closable on iPad.
parent 54f70193
No related branches found
No related tags found
1 merge request!2Issue #3342445: jQuery .live() is deprecated
Hide whitespace changes
Inline Side-by-side
jquery_loadinganimation.css
+ 168
− 168
View file @ 80f909e0
/* Animation */ /* Animation */
/* -- Moving Bar */ /* -- Moving Bar */
@-webkit-keyframes loadinganimation-moving-bar { @-webkit-keyframes loadinganimation-moving-bar {
0% { 0% {
background-position:0 0; background-position:0 0;
opacity:0; opacity:0;
} }
35% { 35% {
background-position:-700px 0; background-position:-700px 0;
opacity:1.0; opacity:1.0;
} }
100% { 100% {
background-position:-1400px 0; background-position:-1400px 0;
opacity:0; opacity:0;
} }
} }
@-moz-keyframes loadinganimation-moving-bar { @-moz-keyframes loadinganimation-moving-bar {
0% { 0% {
background-position:0 0; background-position:0 0;
opacity:0; opacity:0;
} }
35% { 35% {
background-position:-700px 0; background-position:-700px 0;
opacity:1.0; opacity:1.0;
} }
100% { 100% {
background-position:-1400px 0; background-position:-1400px 0;
opacity:0; opacity:0;
} }
} }
@-o-keyframes loadinganimation-moving-bar { @-o-keyframes loadinganimation-moving-bar {
0% { 0% {
background-position:0 0; background-position:0 0;
opacity:0; opacity:0;
} }
35% { 35% {
background-position:-700px 0; background-position:-700px 0;
opacity:1.0; opacity:1.0;
} }
100% { 100% {
background-position:-1400px 0; background-position:-1400px 0;
opacity:0; opacity:0;
} }
} }
@keyframes loadinganimation-moving-bar { @keyframes loadinganimation-moving-bar {
0% { 0% {
background-position:0 0; background-position:0 0;
opacity:0; opacity:0;
} }
35% { 35% {
background-position:-700px 0; background-position:-700px 0;
opacity:1.0; opacity:1.0;
} }
100% { 100% {
background-position:-1400px 0; background-position:-1400px 0;
opacity:0; opacity:0;
} }
} }
/* -- Blinking Text */ /* -- Blinking Text */
@-webkit-keyframes loadinganimation-blinking-text { @-webkit-keyframes loadinganimation-blinking-text {
0% { 0% {
opacity:1.0; opacity:1.0;
} }
50% { 50% {
opacity:0.3; opacity:0.3;
} }
100% { 100% {
opacity:1.0; opacity:1.0;
} }
} }
@-moz-keyframes loadinganimation-blinking-text { @-moz-keyframes loadinganimation-blinking-text {
0% { 0% {
opacity:1.0; opacity:1.0;
} }
50% { 50% {
opacity:0.3; opacity:0.3;
} }
100% { 100% {
opacity:1.0; opacity:1.0;
} }
} }
@-o-keyframes loadinganimation-blinking-text { @-o-keyframes loadinganimation-blinking-text {
0% { 0% {
opacity:1.0; opacity:1.0;
} }
50% { 50% {
opacity:0.3; opacity:0.3;
} }
100% { 100% {
opacity:1.0; opacity:1.0;
} }
} }
@keyframes loadinganimation-blinking-text { @keyframes loadinganimation-blinking-text {
0% { 0% {
opacity:1.0; opacity:1.0;
} }
50% { 50% {
opacity:0.3; opacity:0.3;
} }
100% { 100% {
opacity:1.0; opacity:1.0;
} }
} }
#loadinganimation { #loadinganimation {
position: fixed; position: fixed;
width: 100%; width: 100%;
height:100%; height:100%;
z-index: 999; z-index: 999;
top: 0; top: 0;
left: 0; left: 0;
text-align: center; text-align: center;
color: #000; color: #000;
font-weight: bold; font-weight: bold;
font-size: 0.85em; font-size: 0.85em;
cursor: wait; cursor: pointer;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
#loadinganimation .loadinganimation-box { #loadinganimation .loadinganimation-box {
position:absolute; position:absolute;
/* vertical and horizontal centered */ /* vertical and horizontal centered */
width:50%; width:50%;
height:50px; height:50px;
left:50%; left:50%;
top:50%; top:50%;
margin-top:-40px; margin-top:-40px;
margin-left:-25%; margin-left:-25%;
border-radius:35px; border-radius:35px;
border:10px solid rgba(255,255,255,0.6); border:10px solid rgba(255,255,255,0.6);
} }
#loadinganimation .loadinganimation-outer{ #loadinganimation .loadinganimation-outer{
background:#b6e026; background:#b6e026;
border:1px solid #c9f23e; border:1px solid #c9f23e;
border-radius:25px; border-radius:25px;
box-shadow:0 0 3px rgba(0,0,0,0.3); box-shadow:0 0 3px rgba(0,0,0,0.3);
} }
#loadinganimation .loadinganimation-inner{ #loadinganimation .loadinganimation-inner{
border-radius:25px; border-radius:25px;
height:48px; 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: -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-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: -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: -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: -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 */ 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+ */ -webkit-animation: loadinganimation-moving-bar 3s linear infinite; /* Safari 4+ */
-moz-animation: loadinganimation-moving-bar 3s linear infinite; /* Fx 5+ */ -moz-animation: loadinganimation-moving-bar 3s linear infinite; /* Fx 5+ */
-o-animation: loadinganimation-moving-bar 3s linear infinite; /* Opera 12+ */ -o-animation: loadinganimation-moving-bar 3s linear infinite; /* Opera 12+ */
animation: loadinganimation-moving-bar 3s linear infinite; /* IE 10+ */ animation: loadinganimation-moving-bar 3s linear infinite; /* IE 10+ */
} }
#loadinganimation .loading-text{ #loadinganimation .loading-text{
display:block; display:block;
text-align:center; text-align:center;
color:#fff; color:#fff;
position:relative; position:relative;
z-index:99; z-index:99;
margin-top:-35px; margin-top:-35px;
-webkit-animation: loadinganimation-blinking-text 1s linear infinite; /* Safari 4+ */ -webkit-animation: loadinganimation-blinking-text 1s linear infinite; /* Safari 4+ */
-moz-animation: loadinganimation-blinking-text 1s linear infinite; /* Fx 5+ */ -moz-animation: loadinganimation-blinking-text 1s linear infinite; /* Fx 5+ */
-o-animation: loadinganimation-blinking-text 1s linear infinite; /* Opera 12+ */ -o-animation: loadinganimation-blinking-text 1s linear infinite; /* Opera 12+ */
animation: loadinganimation-blinking-text 1s linear infinite; /* IE 10+ */ animation: loadinganimation-blinking-text 1s linear infinite; /* IE 10+ */
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment