Add loading indicator animation (#4316)
This commit is contained in:
parent
3a3b556065
commit
1e0c7a0afc
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue