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