mirror of https://github.com/trezor/trezor-wallet
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.
74 lines
1.8 KiB
74 lines
1.8 KiB
import React from 'react';
|
|
import styled, { css } from 'styled-components';
|
|
import PropTypes from 'prop-types';
|
|
import Paragraph from 'components/Paragraph';
|
|
import { DASH, GREEN_COLOR } from 'config/animations';
|
|
import colors from 'config/colors';
|
|
|
|
const Wrapper = styled.div`
|
|
position: relative;
|
|
width: ${props => `${props.size}px`};
|
|
height: ${props => `${props.size}px`};
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
`;
|
|
|
|
const SvgWrapper = styled.svg`
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
animation: rotate 2s linear infinite;
|
|
transform-origin: center center;
|
|
`;
|
|
|
|
const CircleWrapper = styled.circle`
|
|
${props => props.isRoute && css`
|
|
stroke: ${colors.GRAY_LIGHT};
|
|
`}
|
|
|
|
${props => props.isPath && css`
|
|
stroke-dasharray: 1, 200;
|
|
stroke-dashoffset: 0;
|
|
animation: ${DASH} 1.5s ease-in-out infinite, ${GREEN_COLOR} 6s ease-in-out infinite;
|
|
stroke-linecap: round;
|
|
`};
|
|
`;
|
|
|
|
const Loader = ({
|
|
className, text, size = 100,
|
|
}) => (
|
|
<Wrapper className={className} size={size}>
|
|
<Paragraph>{text}</Paragraph>
|
|
<SvgWrapper viewBox="25 25 50 50">
|
|
<CircleWrapper
|
|
cx="50"
|
|
cy="50"
|
|
r="20"
|
|
fill="none"
|
|
stroke=""
|
|
strokeWidth="1"
|
|
strokeMiterlimit="10"
|
|
isRoute
|
|
/>
|
|
<CircleWrapper
|
|
cx="50"
|
|
cy="50"
|
|
r="20"
|
|
fill="none"
|
|
strokeWidth="1"
|
|
strokeMiterlimit="10"
|
|
isPath
|
|
/>
|
|
</SvgWrapper>
|
|
</Wrapper>
|
|
);
|
|
|
|
Loader.propTypes = {
|
|
className: PropTypes.string,
|
|
text: PropTypes.string,
|
|
size: PropTypes.number,
|
|
};
|
|
|
|
export default Loader;
|