diff options
| author | skjnldsv <fremulon@protonmail.com> | 2016-05-09 07:28:09 +0200 |
|---|---|---|
| committer | skjnldsv <fremulon@protonmail.com> | 2016-05-09 07:54:43 +0200 |
| commit | ea3cc2661d5304d87aec25a4d87e9dbef4b35d33 (patch) | |
| tree | 69b3380a1b6d17c9ecb194307d39a7ebbc8ae2aa /core/css/icons.css | |
| parent | 5d35844aff8c0c7166fa0eaf99d4c39189c01327 (diff) | |
| download | nextcloud-server-ea3cc2661d5304d87aec25a4d87e9dbef4b35d33.tar.gz nextcloud-server-ea3cc2661d5304d87aec25a4d87e9dbef4b35d33.zip | |
New animated loader
Diffstat (limited to 'core/css/icons.css')
| -rw-r--r-- | core/css/icons.css | 94 |
1 files changed, 86 insertions, 8 deletions
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; } |