diff options
| -rw-r--r-- | core/css/header.css | 2 | ||||
| -rw-r--r-- | core/css/icons.css | 94 | ||||
| -rw-r--r-- | core/css/styles.css | 2 | ||||
| -rw-r--r-- | core/img/loading-dark.gif | bin | 3208 -> 2316 bytes | |||
| -rw-r--r-- | core/img/loading-small-dark.gif | bin | 0 -> 1124 bytes | |||
| -rw-r--r-- | core/img/loading-small.gif | bin | 1294 -> 1124 bytes | |||
| -rw-r--r-- | core/img/loading.gif | bin | 3208 -> 2319 bytes | |||
| -rw-r--r-- | core/js/js.js | 2 |
8 files changed, 88 insertions, 12 deletions
diff --git a/core/css/header.css b/core/css/header.css index af4bbac57a5..d3e9e7cd490 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -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; diff --git a/core/css/icons.css b/core/css/icons.css index 8caeaf0b475..8bf4c204c94 100644 --- a/core/css/icons.css +++ b/core/css/icons.css @@ -14,15 +14,93 @@ background-image: url('../img/breadcrumb.svg'); } -.icon-loading { - background-image: url('../img/loading.gif'); -} -.icon-loading-dark { - background-image: url('../img/loading-dark.gif'); -} -.icon-loading-small { - background-image: url('../img/loading-small.gif'); +.loading, +.loading-small, +.icon-loading, +.icon-loading-dark, +.icon-loading-small, +.icon-loading-small-dark { + position: relative; +} +.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; +} +.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; } diff --git a/core/css/styles.css b/core/css/styles.css index 9257ae82669..736ddc6be01 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -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; diff --git a/core/img/loading-dark.gif b/core/img/loading-dark.gif Binary files differindex 13f0f64eab1..bd56aa9e12b 100644 --- a/core/img/loading-dark.gif +++ b/core/img/loading-dark.gif diff --git a/core/img/loading-small-dark.gif b/core/img/loading-small-dark.gif Binary files differnew file mode 100644 index 00000000000..50be5bfb2a1 --- /dev/null +++ b/core/img/loading-small-dark.gif diff --git a/core/img/loading-small.gif b/core/img/loading-small.gif Binary files differindex 5025f0bedeb..90ed449b1f4 100644 --- a/core/img/loading-small.gif +++ b/core/img/loading-small.gif diff --git a/core/img/loading.gif b/core/img/loading.gif Binary files differindex f8f3dff6fb9..a4816024d3b 100644 --- a/core/img/loading.gif +++ b/core/img/loading.gif diff --git a/core/js/js.js b/core/js/js.js index 69ebabdb419..541ce003a7b 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -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')); }); } |
