cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Add loading indicator animation (#4316)

This commit is contained in:
Eugen Rochko 2017-07-23 20:28:18 +02:00 committed by GitHub
parent 3a3b556065
commit 1e0c7a0afc
2 changed files with 67 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/mastodon/components/loading_indicator.js
View File

@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl';
const LoadingIndicator = () => ( const LoadingIndicator = () => (
<div className='loading-indicator'> <div className='loading-indicator'>
<div className='loading-indicator__figure' />
<FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' /> <FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />
</div> </div>
); );

71
app/javascript/styles/components.scss
View File

@ -2213,11 +2213,72 @@ button.icon-button.active i.fa-retweet {
} }
.loading-indicator { .loading-indicator {
color: $ui-secondary-color; color: lighten($ui-base-color, 26%);
font-size: 16px; font-size: 12px;
font-weight: 500; font-weight: 400;
padding-top: 120px; text-transform: uppercase;
text-align: center; 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 { .video-error-cover {