diff options
| -rw-r--r-- | app/javascript/mastodon/components/loading_indicator.js | 1 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 71 |
2 files changed, 67 insertions, 5 deletions
diff --git a/app/javascript/mastodon/components/loading_indicator.js b/app/javascript/mastodon/components/loading_indicator.js index c09244834..d6a5adb6f 100644 --- a/app/javascript/mastodon/components/loading_indicator.js +++ b/app/javascript/mastodon/components/loading_indicator.js @@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl'; const LoadingIndicator = () => ( <div className='loading-indicator'> + <div className='loading-indicator__figure' /> <FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' /> </div> ); 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 { |