mastofe

commit: 1e0c7a0afc0f3635c9b5f43f53c386aea9e1f650
parent: 3a3b556065d34a52843b427fb211d8649f01fe89
Author: Eugen Rochko <eugen@zeonfederated.com>
Date:   Sun, 23 Jul 2017 20:28:18 +0200

Add loading indicator animation (#4316)


Diffstat:
M
app/javascript/mastodon/components/loading_indicator.js
1
+
M
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
@@ -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
@@ -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 {