diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2017-07-23 20:28:18 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-07-23 20:28:18 +0200 |
commit | 1e0c7a0afc0f3635c9b5f43f53c386aea9e1f650 (patch) | |
tree | 160ec89613290ce60bbb74d4038593e5ff094e61 /app/javascript/styles/components.scss | |
parent | 3a3b556065d34a52843b427fb211d8649f01fe89 (diff) |
Add loading indicator animation (#4316)
Diffstat (limited to 'app/javascript/styles/components.scss')
-rw-r--r-- | app/javascript/styles/components.scss | 71 |
1 files changed, 66 insertions, 5 deletions
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index e6ccace9c..e95be3f19 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -2213,11 +2213,72 @@ button.icon-button.active i.fa-retweet { } .loading-indicator { - color: $ui-secondary-color; - font-size: 16px; - font-weight: 500; - padding-top: 120px; - text-align: center; + color: lighten($ui-base-color, 26%); + font-size: 12px; + font-weight: 400; + text-transform: uppercase; + overflow: visible; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + span { + display: block; + float: left; + margin-left: 50%; + transform: translateX(-50%); + margin: 82px 0 0 50%; + white-space: nowrap; + animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); + } +} + +.loading-indicator__figure { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 0; + height: 0; + box-sizing: border-box; + border: 0 solid lighten($ui-base-color, 26%); + border-radius: 50%; + animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); +} + +@keyframes loader-figure { + 0% { + width: 0; + height: 0; + background-color: lighten($ui-base-color, 26%); + } + + 29% { + background-color: lighten($ui-base-color, 26%); + } + + 30% { + width: 42px; + height: 42px; + background-color: transparent; + border-width: 21px; + opacity: 1; + } + + 100% { + width: 42px; + height: 42px; + border-width: 0; + opacity: 0; + background-color: transparent; + } +} + +@keyframes loader-label { + 0% { opacity: 0.25; } + 30% { opacity: 1; } + 100% { opacity: 0.25; } } .video-error-cover { |