diff --git a/components/loader/FullLoader.js b/components/loader/FullLoader.js
deleted file mode 100644
index 92b786812..000000000
--- a/components/loader/FullLoader.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { classnames } from '../../helpers/component';
-
-const FullLoader = ({ size = 50, color, className }) => {
-    const smaller = size < 50;
-    return (
-        <svg className={classnames(['loadingAnimation', className])} viewBox="0 0 200 200" width={size} height={size}>
-            <circle
-                cx="100"
-                cy="100"
-                r="80"
-                className={classnames([
-                    'loadingAnimation-circle',
-                    smaller ? 'loadingAnimation-orbit1--smaller' : 'loadingAnimation-orbit1',
-                    smaller && 'loadingAnimation-circle--smaller',
-                    color && `loadingAnimation-circle--${color}`
-                ])}
-            />
-            <circle
-                cx="100"
-                cy="100"
-                r="80"
-                className={classnames([
-                    'loadingAnimation-circle',
-                    smaller ? 'loadingAnimation-orbit2--smaller' : 'loadingAnimation-orbit2',
-                    smaller && 'loadingAnimation-circle--smaller',
-                    color && `loadingAnimation-circle--${color}`
-                ])}
-            />
-        </svg>
-    );
-};
-
-FullLoader.propTypes = {
-    size: PropTypes.number,
-    color: PropTypes.string,
-    className: PropTypes.string
-};
-
-export default FullLoader;
diff --git a/components/loader/FullLoader.tsx b/components/loader/FullLoader.tsx
new file mode 100644
index 000000000..67c13dc7a
--- /dev/null
+++ b/components/loader/FullLoader.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { c } from 'ttag';
+
+import { classnames } from '../../helpers/component';
+
+interface Props {
+    size?: number;
+    color?: string;
+    className?: string;
+}
+const FullLoader = ({ size = 50, color, className }: Props) => {
+    const isSmall = size < 50;
+
+    const diameter = isSmall ? 10 : 100;
+    const radius = isSmall ? 8 : 80;
+    const viewBox = isSmall ? '0 0 20 20' : '0 0 200 200';
+
+    return (
+        <>
+            <svg
+                className={classnames(['loadingAnimation', className])}
+                viewBox={viewBox}
+                width={size}
+                height={size}
+                role="img"
+                aria-hidden="true"
+                focusable="false"
+            >
+                <circle
+                    cx={diameter}
+                    cy={diameter}
+                    r={radius}
+                    className={classnames([
+                        'loadingAnimation-circle',
+                        isSmall ? 'loadingAnimation-orbit1--smaller' : 'loadingAnimation-orbit1',
+                        isSmall && 'loadingAnimation-circle--smaller',
+                        color && `loadingAnimation-circle--${color}`
+                    ])}
+                />
+                <circle
+                    cx={diameter}
+                    cy={diameter}
+                    r={radius}
+                    className={classnames([
+                        'loadingAnimation-circle',
+                        isSmall ? 'loadingAnimation-orbit2--smaller' : 'loadingAnimation-orbit2',
+                        isSmall && 'loadingAnimation-circle--smaller',
+                        color && `loadingAnimation-circle--${color}`
+                    ])}
+                />
+            </svg>
+            <span className="sr-only">{c('Info').t`Loading`}</span>
+        </>
+    );
+};
+
+export default FullLoader;
diff --git a/components/loader/Loader.tsx b/components/loader/Loader.tsx
index d7e3bda13..b641466e7 100644
--- a/components/loader/Loader.tsx
+++ b/components/loader/Loader.tsx
@@ -1,31 +1,21 @@
 import React from 'react';
-import { c } from 'ttag';
-import loadingSvg from 'design-system/assets/img/shared/loading-atom.svg';
-import loadingSmallerSvg from 'design-system/assets/img/shared/loading-atom-smaller.svg';
+import FullLoader from './FullLoader';
 
-const IMAGES = {
-    small: loadingSmallerSvg,
-    medium: loadingSvg,
-    big: loadingSvg
+const SIZE = {
+    small: 20,
+    medium: 80,
+    big: 200
 };
 
-const MEDIUM_WIDTH = '80';
-const MEDIUM_HEIGHT = '80';
-
 interface Props {
     size?: 'small' | 'medium' | 'big';
+    color?: string;
 }
 
-const Loader = ({ size = 'small' }: Props) => {
+const Loader = ({ size = 'small', color = '' }: Props) => {
     return (
         <div className="center flex mb2 mt2">
-            <img
-                className="mauto"
-                src={IMAGES[size]}
-                width={size === 'medium' ? MEDIUM_WIDTH : undefined}
-                height={size === 'medium' ? MEDIUM_HEIGHT : undefined}
-                alt={c('Info').t`Loading`}
-            />
+            <FullLoader size={SIZE[size]} color={color} className="mauto" />
         </div>
     );
 };