mirror of
https://github.com/Lissy93/web-check.git
synced 2025-04-24 09:28:24 +02:00
104 lines
2.8 KiB
TypeScript
104 lines
2.8 KiB
TypeScript
import styled from 'styled-components';
|
|
|
|
import { StyledCard } from 'components/Form/Card';
|
|
import Heading from 'components/Form/Heading';
|
|
import colors from 'styles/colors';
|
|
|
|
const LoaderContainer = styled(StyledCard)`
|
|
margin: 0 auto 1rem auto;
|
|
width: 95vw;
|
|
position: relative;
|
|
transition: all 0.2s ease-in-out;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
height: 50vh;
|
|
transition: all 0.3s ease-in-out;
|
|
p.loadTimeInfo {
|
|
text-align: center;
|
|
margin: 0;
|
|
color: ${colors.textColorSecondary};
|
|
opacity: 0.5;
|
|
}
|
|
&.flex {
|
|
display: flex;
|
|
}
|
|
&.finished {
|
|
height: 0;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
svg { width: 0; }
|
|
h4 { font-size: 0; }
|
|
}
|
|
&.hide {
|
|
display: none;
|
|
}
|
|
`;
|
|
|
|
const StyledSvg = styled.svg`
|
|
width: 200px;
|
|
margin: 0 auto;
|
|
path {
|
|
fill: ${colors.primary};
|
|
&:nth-child(2) { opacity: 0.8; }
|
|
&:nth-child(3) { opacity: 0.5; }
|
|
}
|
|
`;
|
|
|
|
const Loader = (props: { show: boolean }): JSX.Element => {
|
|
return (
|
|
<LoaderContainer className={props.show ? '' : 'finished'}>
|
|
<Heading as="h4" color={colors.primary}>Crunching data...</Heading>
|
|
<StyledSvg version="1.1" id="L7" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
viewBox="0 0 100 100" enableBackground="new 0 0 100 100">
|
|
<path fill="#fff" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
|
|
c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
|
|
<animateTransform
|
|
attributeName="transform"
|
|
attributeType="XML"
|
|
type="rotate"
|
|
dur="2s"
|
|
from="0 50 50"
|
|
to="360 50 50"
|
|
repeatCount="indefinite" />
|
|
</path>
|
|
<path fill="#fff" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
|
|
c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
|
|
<animateTransform
|
|
attributeName="transform"
|
|
attributeType="XML"
|
|
type="rotate"
|
|
dur="1s"
|
|
from="0 50 50"
|
|
to="-360 50 50"
|
|
repeatCount="indefinite" />
|
|
</path>
|
|
<path fill="#fff" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
|
|
L82,35.7z">
|
|
<animateTransform
|
|
attributeName="transform"
|
|
attributeType="XML"
|
|
type="rotate"
|
|
dur="2s"
|
|
from="0 50 50"
|
|
to="360 50 50"
|
|
repeatCount="indefinite" />
|
|
</path>
|
|
</StyledSvg>
|
|
<p className="loadTimeInfo">
|
|
It may take up-to a minute for all jobs to complete<br />
|
|
You can view preliminary results as they come in below
|
|
</p>
|
|
</LoaderContainer>
|
|
);
|
|
}
|
|
|
|
export default Loader;
|
|
|
|
|
|
|