|
|
|
@ -58,17 +58,17 @@ export const LoadingBar = styled.div<{ visible: boolean; progress: number }>`
|
|
|
|
|
height: 1px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
width: ${(props) => (props.progress === 0 ? 100 : props.progress)}%;
|
|
|
|
|
background-image: ${(props) => (props.progress === 0 ? `linear-gradient(
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-image: linear-gradient(
|
|
|
|
|
90deg,
|
|
|
|
|
${(props) => props.theme.colors.textHeadings} 0%,
|
|
|
|
|
${(props) => props.theme.colors.bg2} 40%,
|
|
|
|
|
${(props) => props.theme.colors.bg3} 60%,
|
|
|
|
|
${(props) => props.theme.colors.textHeadings} 100%
|
|
|
|
|
);` : props.theme.colors.textHeadings)}
|
|
|
|
|
);
|
|
|
|
|
background-size: 200%;
|
|
|
|
|
background-repeat: repeat-x;
|
|
|
|
|
animation: ${(props) => (props.progress === 0 ? `${Gradient} 2s linear infinite` : 'none')};
|
|
|
|
|
animation: ${Gradient} 2s linear infinite;
|
|
|
|
|
opacity: ${(props) => (props.visible ? '1' : '0')};
|
|
|
|
|
transition: opacity 0.2s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|