mirror of https://github.com/trezor/trezor-wallet
parent
6946500f0a
commit
2ba9c61ff2
@ -0,0 +1,105 @@
|
||||
import React from 'react';
|
||||
import styled, { css, keyframes } from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
import P from 'components/Paragraph';
|
||||
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 animationDash = keyframes`
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124;
|
||||
}
|
||||
`;
|
||||
|
||||
const animationColor = keyframes`
|
||||
100%, 0% {
|
||||
stroke: ${colors.GREEN_PRIMARY};
|
||||
}
|
||||
40% {
|
||||
stroke: ${colors.GREEN_PRIMARY};
|
||||
}
|
||||
66% {
|
||||
stroke: ${colors.GREEN_SECONDARY};
|
||||
}
|
||||
80%, 90% {
|
||||
stroke: ${colors.GREEN_TERTIARY};
|
||||
}
|
||||
`;
|
||||
|
||||
const CircleWrapper = styled.circle`
|
||||
${props => props.isRoute && css`
|
||||
stroke: ${colors.GRAY_LIGHT};
|
||||
`}
|
||||
|
||||
${props => props.isPath && css`
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
animation: ${animationDash} 1.5s ease-in-out infinite, ${animationColor} 6s ease-in-out infinite;
|
||||
stroke-linecap: round;
|
||||
`};
|
||||
`;
|
||||
|
||||
const Loader = ({
|
||||
className, text, size = 100,
|
||||
}) => (
|
||||
<Wrapper
|
||||
className={className}
|
||||
size={size}
|
||||
>
|
||||
<P>{text}</P>
|
||||
<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;
|
@ -1,21 +0,0 @@
|
||||
/* @flow */
|
||||
|
||||
import React from 'react';
|
||||
|
||||
export default (props: { size: string, label?: string, className?: string }): React$Element<string> => {
|
||||
const className = props.className ? `loader-circle ${props.className}` : 'loader-circle';
|
||||
const style = {
|
||||
width: `${props.size}px`,
|
||||
height: `${props.size}px`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={className} style={style}>
|
||||
<p>{ props.label }</p>
|
||||
<svg className="circular" viewBox="25 25 50 50">
|
||||
<circle className="route" cx="50" cy="50" r="20" fill="none" stroke="" strokeWidth="1" strokeMiterlimit="10" />
|
||||
<circle className="path" cx="50" cy="50" r="20" fill="none" strokeWidth="1" strokeMiterlimit="10" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
Loading…
Reference in new issue