You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.1 KiB
72 lines
1.1 KiB
import React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
const Screen = styled.div`
|
|
position: relative;
|
|
|
|
opacity: 0;
|
|
animation: fade 0.4s ease-in forwards;
|
|
background: black;
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 0.4;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const Balls = styled.div`
|
|
display: flex;
|
|
|
|
.ball {
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 50%;
|
|
background: red;
|
|
margin: 0 6px 0 0;
|
|
animation: oscillate 0.7s ease-in forwards infinite;
|
|
}
|
|
|
|
.one {
|
|
animation-delay: 0.5s;
|
|
}
|
|
.two {
|
|
animation-delay: 1s;
|
|
}
|
|
.three {
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
@keyframes oscillate {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(20px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
`;
|
|
|
|
const LoadingScreen = () => {
|
|
return (
|
|
<Screen>
|
|
<Balls>
|
|
<div className="ball one"></div>
|
|
<div className="ball two"></div>
|
|
<div className="ball three"></div>
|
|
</Balls>
|
|
</Screen>
|
|
);
|
|
};
|
|
|
|
export default LoadingScreen;
|