diff --git a/app/javascript/mastodon/components/loading_indicator.js b/app/javascript/mastodon/components/loading_indicator.js
index c09244834ec..d6a5adb6fe7 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 = () => (
);
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index e6ccace9c65..e95be3f19c9 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 {