erik/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-08-20 21:08:15 -07:00
Code Issues Projects Releases Wiki Activity

Add loading indicator animation (#4316)

Browse source
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 = () => (
<div className='loading-indicator'>
<div className='loading-indicator__figure' />
<FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />
</div>
);

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

@ -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 {