Merge pull request #24491 from owncloud/new-animated-full-css-spinner

New animated loader: full css
This commit is contained in:
Thomas Müller 2016-05-09 11:32:32 +02:00
commit 885c842100
8 changed files with 86 additions and 10 deletions

View File

@ -294,7 +294,7 @@
color: #bbb;
cursor: pointer;
}
#settings .icon-loading-dark {
#settings .icon-loading-small-dark {
display: inline-block;
margin-bottom: -3px;
margin-right: 6px;

View File

@ -14,15 +14,93 @@
background-image: url('../img/breadcrumb.svg');
}
.icon-loading {
background-image: url('../img/loading.gif');
.loading,
.loading-small,
.icon-loading,
.icon-loading-dark,
.icon-loading-small,
.icon-loading-small-dark {
position: relative;
}
.icon-loading-dark {
background-image: url('../img/loading-dark.gif');
.loading:after,
.loading-small:after,
.icon-loading:after,
.icon-loading-dark:after,
.icon-loading-small:after,
.icon-loading-small-dark:after {
z-index: 2;
content: "";
height: 32px;
width: 32px;
margin: -17px 0 0 -17px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 100%;
-webkit-animation: rotate .8s infinite linear;
animation: rotate .8s infinite linear;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
}
.icon-loading-small {
background-image: url('../img/loading-small.gif');
.loading:after,
.loading-small:after,
.icon-loading:after,
.icon-loading-dark:after,
.icon-loading-small:after,
.icon-loading-small-dark:after {
border: 1px solid rgba(85, 85, 85, 0.5);
border-top-color: #555;
}
.icon-loading-dark:after,
.icon-loading-small-dark:after {
border: 1px solid rgba(187, 187, 187, 0.5);
border-top-color: #BBB;
}
.icon-loading-small:after,
.icon-loading-small-dark:after {
height: 16px;
width: 16px;
margin: -9px 0 0 -9px;
}
/* Css replaced elements don't have ::after nor ::before */
img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading {
background-image: url("../img/loading.gif");
}
img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark {
background-image: url("../img/loading-dark.gif");
}
img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small {
background-image: url("../img/loading-small.gif");
}
img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark {
background-image: url("../img/loading-small-dark.gif");
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.icon-32 {
background-size: 32px !important;
}

View File

@ -801,8 +801,6 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
.ui-dialog {position:fixed !important;}
span.ui-icon {float: left; margin: 3px 7px 30px 0;}
.loading { background: url('../img/loading.gif') no-repeat center; cursor: wait; }
.loading-small { background: url('../img/loading-small.gif') no-repeat center; cursor: wait; }
.move2trash { /* decrease spinner size */
width: 16px;
height: 16px;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -1579,7 +1579,7 @@ function initCore() {
}
$page.find('img').remove();
$page.find('div').remove(); // prevent odd double-clicks
$page.prepend($('<div/>').addClass('icon-loading-dark'));
$page.prepend($('<div/>').addClass('icon-loading-small-dark'));
});
}