diff --git a/src/styles/components/conversation.ts b/src/styles/components/conversation.ts index be121d0..55192a5 100644 --- a/src/styles/components/conversation.ts +++ b/src/styles/components/conversation.ts @@ -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; }