diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js
index 3d6e839a..0cb29e98 100644
--- a/src/components/Loader/index.js
+++ b/src/components/Loader/index.js
@@ -25,10 +25,11 @@ const SvgWrapper = styled.svg`
const CircleWrapper = styled.circle`
${props => props.isRoute && css`
- stroke: ${colors.GRAY_LIGHT};
+ stroke: ${props.transparentRoute ? 'transparent' : colors.GRAY_LIGHT};
`}
${props => props.isPath && css`
+ stroke-width: ${props.transparentRoute ? '2px' : '1px'};
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: ${DASH} 1.5s ease-in-out infinite, ${props.animationColor || GREEN_COLOR} 6s ease-in-out infinite;
@@ -42,7 +43,7 @@ const StyledParagraph = styled(Paragraph)`
`;
const Loader = ({
- className, text, isWhiteText = false, isSmallText, size = 100, animationColor,
+ className, text, isWhiteText = false, isSmallText, size = 100, animationColor, transparentRoute,
}) => (
{text}
@@ -54,18 +55,19 @@ const Loader = ({
r="20"
fill="none"
stroke=""
- strokeWidth="1"
strokeMiterlimit="10"
isRoute
+ transparentRoute={transparentRoute}
/>
@@ -77,6 +79,7 @@ Loader.propTypes = {
className: PropTypes.string,
text: PropTypes.string,
animationColor: PropTypes.string,
+ transparentRoute: PropTypes.bool,
size: PropTypes.number,
};
diff --git a/src/components/Notification/components/NotificationButton/index.js b/src/components/Notification/components/NotificationButton/index.js
index 2ff20459..9d001380 100644
--- a/src/components/Notification/components/NotificationButton/index.js
+++ b/src/components/Notification/components/NotificationButton/index.js
@@ -5,7 +5,7 @@ import styled from 'styled-components';
import PropTypes from 'prop-types';
import Icon from 'components/Icon';
import colors from 'config/colors';
-import { BLUE_COLOR } from 'config/animations';
+import { WHITE_COLOR } from 'config/animations';
import { getPrimaryColor } from 'utils/notification';
import Loader from 'components/Loader';
import { TRANSITION, FONT_SIZE, FONT_WEIGHT } from 'config/variables';
@@ -68,7 +68,7 @@ const NotificationButton = ({
>
{isLoading && (
-
+
)}
{icon && (
diff --git a/src/config/animations.js b/src/config/animations.js
index e23ba206..950ea9e2 100644
--- a/src/config/animations.js
+++ b/src/config/animations.js
@@ -49,18 +49,9 @@ export const GREEN_COLOR = keyframes`
}
`;
-export const BLUE_COLOR = keyframes`
- 100%, 0% {
- stroke: ${colors.WHITE};
- }
- 40% {
- stroke: ${colors.BLUE_SECONDARY};
- }
- 66% {
- stroke: ${colors.WHITE};
- }
- 80%, 90% {
- stroke: ${colors.WHITE};
+export const WHITE_COLOR = keyframes`
+ 0%, 100% {
+ stroke: white;
}
`;