Feature/new spinners

src/index.tsx

@@ -20,21 +20,41 @@ import ThreeDots from './loader/ThreeDots'
 import Triangle from './loader/Triangle'
 import Watch from './loader/Watch'
 import FallingLines from './loader/FallingLines'
+import Vortex from './loader/Vortex'
+import RotatingTriangles from './loader/RotatingTriangles'
+import Radio from './loader/Radio'
+import ProgressBar from './loader/ProgressBar'
+import MagnifyingGlass from './loader/MagnifyingGlass'
+import FidgetSpinner from './loader/FidgetSpinner'
+import DNA from './loader/DNA'
+import Discuss from './loader/Discuss'
+import ColorRing from './loader/ColorRing'
+import Comment from './loader/Comment'
+import Blocks from './loader/Blocks'
 
 export {
   Audio,
   BallTriangle,
   Bars,
+  Blocks,
   Circles,
   CirclesWithBar,
+  ColorRing,
+  Comment,
+  Discuss,
+  DNA,
   Grid,
   FallingLines,
+  FidgetSpinner,
   Hearts,
   InfinitySpin,
   LineWave,
+  MagnifyingGlass,
   MutatingDots,
   Oval,
+  ProgressBar,
   Puff,
+  Radio,
   RevolvingDot,
   RotatingSquare,
   RotatingLines,
@@ -43,5 +63,7 @@ export {
   ThreeDots,
   ThreeCircles,
   Triangle,
+  RotatingTriangles,
   Watch,
+  Vortex,
 }

src/loader/Blocks.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import { BaseProps, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+
+interface BlocksProps extends BaseProps {}
+
+export default function Blocks({
+  visible = true,
+  width = '80',
+  height = '80',
+  wrapperClass='',
+  wrapperStyle={},
+  ariaLabel='blocks-loading',
+}: BlocksProps) {
+  return !visible ? null : (
+    <svg
+      width={width}
+      height={height}
+      className={wrapperClass}
+      style={wrapperStyle}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+      aria-label={ariaLabel}
+      data-testid="blocks-svg"
+      {...DEFAULT_WAI_ARIA_ATTRIBUTE}
+    >
+      <rect x="17" y="17" width="20" height="20" fill="#577c9b">
+        <animate
+          attributeName="fill"
+          values="#0dceff;#577c9b;#577c9b"
+          keyTimes="0;0.125;1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0s"
+          calcMode="discrete"
+        ></animate>
+      </rect>
+      <rect x="40" y="17" width="20" height="20" fill="#577c9b">
+        <animate
+          attributeName="fill"
+          values="#0dceff;#577c9b;#577c9b"
+          keyTimes="0;0.125;1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.125s"
+          calcMode="discrete"
+        ></animate>
+      </rect>
+      <rect x="63" y="17" width="20" height="20" fill="#577c9b">
+        <animate
+          attributeName="fill"
+          values="#0dceff;#577c9b;#577c9b"
+          keyTimes="0;0.125;1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.25s"
+          calcMode="discrete"
+        ></animate>
+      </rect>
+      <rect x="17" y="40" width="20" height="20" fill="#577c9b">
+        <animate
+          attributeName="fill"
+          values="#0dceff;#577c9b;#577c9b"
+          keyTimes="0;0.125;1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.875s"
+          calcMode="discrete"
+        ></animate>
+      </rect>
+      <rect x="63" y="40" width="20" height="20" fill="#577c9b">
+        <animate
+          attributeName="fill"
+          values="#0dceff;#577c9b;#577c9b"
+          keyTimes="0;0.125;1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.375s"
+          calcMode="discrete"
+        ></animate>
+      </rect>
+      <rect x="17" y="63" width="20" height="20" fill="#577c9b">
+        <animate
+          attributeName="fill"
+          values="#0dceff;#577c9b;#577c9b"
+          keyTimes="0;0.125;1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.75s"
+          calcMode="discrete"
+        ></animate>
+      </rect>
+      <rect x="40" y="63" width="20" height="20" fill="#577c9b">
+        <animate
+          attributeName="fill"
+          values="#0dceff;#577c9b;#577c9b"
+          keyTimes="0;0.125;1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.625s"
+          calcMode="discrete"
+        ></animate>
+      </rect>
+      <rect x="63" y="63" width="20" height="20" fill="#577c9b">
+        <animate
+          attributeName="fill"
+          values="#0dceff;#577c9b;#577c9b"
+          keyTimes="0;0.125;1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.5s"
+          calcMode="discrete"
+        ></animate>
+      </rect>
+    </svg>
+  )
+}

src/loader/ColorRing.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import { BaseProps, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+
+interface ColorRingProps extends Omit<BaseProps, 'color'> {
+  colors?: [string, string, string, string, string]
+}
+
+export default function ColorRing({
+  visible = true,
+  width = '80',
+  height = '80',
+  colors = ['#e15b64', '#f47e60', '#f8b26a', '#abbd81', '#849b87'],
+  wrapperClass = '',
+  wrapperStyle = {},
+  ariaLabel = 'color-ring-loading',
+}: ColorRingProps) {
+  return !visible ? null : (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width={width}
+      height={height}
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+      className={wrapperClass}
+      style={wrapperStyle}
+      aria-label={ariaLabel}
+      data-testid="color-ring-svg"
+      {...DEFAULT_WAI_ARIA_ATTRIBUTE}
+    >
+      <defs>
+        <mask id="ldio-4offds5dlws-mask">
+          <circle
+            cx="50"
+            cy="50"
+            r="26"
+            stroke="#fff"
+            strokeLinecap="round"
+            strokeDasharray="122.52211349000194 40.840704496667314"
+            strokeWidth="9"
+            transform="rotate(198.018 50 50)"
+          >
+            <animateTransform
+              attributeName="transform"
+              type="rotate"
+              values="0 50 50;360 50 50"
+              keyTimes="0;1"
+              dur="1s"
+              repeatCount="indefinite"
+            ></animateTransform>
+          </circle>
+        </mask>
+      </defs>
+      <g mask="url(#ldio-4offds5dlws-mask)">
+        <rect x="14.5" y="0" width="15" height="100" fill={colors[0]}>
+          <animate
+            attributeName="fill"
+            values={colors.join(';').toString()}
+            keyTimes="0;0.25;0.5;0.75;1"
+            dur="1s"
+            repeatCount="indefinite"
+            begin="-0.8s"
+          ></animate>
+        </rect>
+        <rect x="28.5" y="0" width="15" height="100" fill={colors[1]}>
+          <animate
+            attributeName="fill"
+            values={colors.join(';').toString()}
+            keyTimes="0;0.25;0.5;0.75;1"
+            dur="1s"
+            repeatCount="indefinite"
+            begin="-0.6s"
+          ></animate>
+        </rect>
+        <rect x="42.5" y="0" width="15" height="100" fill={colors[2]}>
+          <animate
+            attributeName="fill"
+            values={colors.join(';').toString()}
+            keyTimes="0;0.25;0.5;0.75;1"
+            dur="1s"
+            repeatCount="indefinite"
+            begin="-0.4s"
+          ></animate>
+        </rect>
+        <rect x="56.5" y="0" width="15" height="100" fill={colors[3]}>
+          <animate
+            attributeName="fill"
+            values={colors.join(';').toString()}
+            keyTimes="0;0.25;0.5;0.75;1"
+            dur="1s"
+            repeatCount="indefinite"
+            begin="-0.2s"
+          ></animate>
+        </rect>
+        <rect x="70.5" y="0" width="15" height="100" fill={colors[4]}>
+          <animate
+            attributeName="fill"
+            values={colors.join(';').toString()}
+            keyTimes="0;0.25;0.5;0.75;1"
+            dur="1s"
+            repeatCount="indefinite"
+            begin="0s"
+          ></animate>
+        </rect>
+      </g>
+    </svg>
+  )
+}

src/loader/Comment.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { BaseProps, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+
+interface CommentProps extends BaseProps {
+  backgroundColor?: string
+}
+
+
+export default function Comment({
+  visible = true,
+  width = '80',
+  height = '80',
+  backgroundColor = '#ff6d00',
+  color = '#fff',
+  wrapperClass = '',
+  wrapperStyle = {},
+  ariaLabel = 'comment-loading',
+}: CommentProps) {
+  return !visible ?null: (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+      className={wrapperClass}
+      style={wrapperStyle}
+      aria-label={ariaLabel}
+      data-testid={'comment-svg'}
+      {...DEFAULT_WAI_ARIA_ATTRIBUTE}
+    >
+      <path
+        d="M78,19H22c-6.6,0-12,5.4-12,12v31c0,6.6,5.4,12,12,12h37.2c0.4,3,1.8,5.6,3.7,7.6c2.4,2.5,5.1,4.1,9.1,4 c-1.4-2.1-2-7.2-2-10.3c0-0.4,0-0.8,0-1.3h8c6.6,0,12-5.4,12-12V31C90,24.4,84.6,19,78,19z"
+        ng-attr-fill="{{config.c1}}"
+        fill={backgroundColor}
+      ></path>
+      <circle cx="30" cy="47" r="5" ng-attr-fill="{{config.c2}}" fill={color}>
+        <animate
+          attributeName="opacity"
+          calcMode="linear"
+          values="0;1;1"
+          keyTimes="0;0.2;1"
+          dur="1"
+          begin="0s"
+          repeatCount="indefinite"
+        ></animate>
+      </circle>
+      <circle cx="50" cy="47" r="5" ng-attr-fill="{{config.c3}}" fill={color}>
+        <animate
+          attributeName="opacity"
+          calcMode="linear"
+          values="0;0;1;1"
+          keyTimes="0;0.2;0.4;1"
+          dur="1"
+          begin="0s"
+          repeatCount="indefinite"
+        ></animate>
+      </circle>
+      <circle cx="70" cy="47" r="5" ng-attr-fill="{{config.c4}}" fill={color}>
+        <animate
+          attributeName="opacity"
+          calcMode="linear"
+          values="0;0;1;1"
+          keyTimes="0;0.4;0.6;1"
+          dur="1"
+          begin="0s"
+          repeatCount="indefinite"
+        ></animate>
+      </circle>
+    </svg>
+  )
+}