Aarni Halinen
116 lines
2.1 KiB
TypeScript
116 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import Loader from "@components/Loader";
|
|
import colors from "@theme/colors";
|
|
|
|
const Main = styled.main`
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 0 auto;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: ${colors.white};
|
|
background-color: ${colors.darkBlue};
|
|
|
|
${/* sc-selector */Loader} {
|
|
font-size: 10rem;
|
|
}
|
|
`;
|
|
|
|
const DotPulse = styled.div`
|
|
@keyframes dotPulseBefore {
|
|
0% {
|
|
box-shadow: 9984px 0 0 -5px ${colors.white};
|
|
}
|
|
|
|
30% {
|
|
box-shadow: 9984px 0 0 2px ${colors.white};
|
|
}
|
|
|
|
60%,
|
|
100% {
|
|
box-shadow: 9984px 0 0 -5px ${colors.white};
|
|
}
|
|
}
|
|
|
|
@keyframes dotPulse {
|
|
0% {
|
|
box-shadow: 9999px 0 0 -5px ${colors.white};
|
|
}
|
|
|
|
30% {
|
|
box-shadow: 9999px 0 0 2px ${colors.white};
|
|
}
|
|
|
|
60%,
|
|
100% {
|
|
box-shadow: 9999px 0 0 -5px ${colors.white};
|
|
}
|
|
}
|
|
|
|
@keyframes dotPulseAfter {
|
|
0% {
|
|
box-shadow: 10014px 0 0 -5px ${colors.white};
|
|
}
|
|
|
|
30% {
|
|
box-shadow: 10014px 0 0 2px ${colors.white};
|
|
}
|
|
|
|
60%,
|
|
100% {
|
|
box-shadow: 10014px 0 0 -5px ${colors.white};
|
|
}
|
|
}
|
|
|
|
display: inline-block;
|
|
margin-left: 1.5rem;
|
|
position: relative;
|
|
left: -9999px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background-color: ${colors.white};
|
|
color: ${colors.white};
|
|
box-shadow: 9999px 0 0 -5px ${colors.white};
|
|
animation: dotPulse 1.5s infinite linear;
|
|
animation-delay: 0.25s;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background-color: ${colors.white};
|
|
color: ${colors.white};
|
|
}
|
|
|
|
&::before {
|
|
box-shadow: 9984px 0 0 -5px ${colors.white};
|
|
animation: dotPulseBefore 1.5s infinite linear;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
&::after {
|
|
box-shadow: 10014px 0 0 -5px ${colors.white};
|
|
animation: dotPulseAfter 1.5s infinite linear;
|
|
animation-delay: 0.5s;
|
|
}
|
|
`;
|
|
|
|
const LoadingView: React.FC = () => (
|
|
<Main>
|
|
<Loader />
|
|
<h3>
|
|
Loading
|
|
<DotPulse />
|
|
</h3>
|
|
</Main>
|
|
);
|
|
|
|
export default LoadingView;
|