logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/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:

Mapp/javascript/mastodon/components/loading_indicator.js1+
Mapp/javascript/styles/components.scss71++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
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 {