diff --git a/src/index.tsx b/src/index.tsx
index 4ddcb791..323476fc 100644
--- a/src/index.tsx
+++ b/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,
}
diff --git a/src/loader/Blocks.tsx b/src/loader/Blocks.tsx
new file mode 100644
index 00000000..4e142ee7
--- /dev/null
+++ b/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 : (
+
+ )
+}
diff --git a/src/loader/ColorRing.tsx b/src/loader/ColorRing.tsx
new file mode 100644
index 00000000..96c193f8
--- /dev/null
+++ b/src/loader/ColorRing.tsx
@@ -0,0 +1,108 @@
+import React from 'react'
+import { BaseProps, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+
+interface ColorRingProps extends Omit {
+ 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 : (
+
+ )
+}
diff --git a/src/loader/Comment.tsx b/src/loader/Comment.tsx
new file mode 100644
index 00000000..0f8cdcb9
--- /dev/null
+++ b/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: (
+
+ )
+}
diff --git a/src/loader/Discuss.tsx b/src/loader/Discuss.tsx
new file mode 100644
index 00000000..a16534b1
--- /dev/null
+++ b/src/loader/Discuss.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import { BaseProps, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+
+interface DiscussProps extends Omit {
+ colors?: [string, string]
+}
+
+export default function Discuss({
+ visible = true,
+ width = '80',
+ height = '80',
+ wrapperClass = '',
+ wrapperStyle = {},
+ ariaLabel = 'discuss-loading',
+ colors= ['#ff727d', '#ff727d']
+}: DiscussProps) {
+ return !visible ? null : (
+
+ )
+}
diff --git a/src/loader/Dna.tsx b/src/loader/Dna.tsx
new file mode 100644
index 00000000..5f47b7db
--- /dev/null
+++ b/src/loader/Dna.tsx
@@ -0,0 +1,640 @@
+import React from 'react'
+import { BaseProps, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+
+interface DnaProps extends Omit {}
+
+export default function DNA({
+ visible = true,
+ width = '80',
+ height = '80',
+ wrapperClass = '',
+ wrapperStyle = {},
+ ariaLabel = 'dna-loading',
+}: DnaProps) {
+ return !visible ? null : (
+
+ )
+}
diff --git a/src/loader/FidgetSpinner.tsx b/src/loader/FidgetSpinner.tsx
new file mode 100644
index 00000000..69e20370
--- /dev/null
+++ b/src/loader/FidgetSpinner.tsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import { BaseProps, DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+
+interface FidgetSpinnerProps extends Omit {
+ backgroundColor?: string
+ ballColors?: [string, string, string]
+}
+
+export default function FidgetSpinner({
+ width = '80',
+ height = '80',
+ backgroundColor = DEFAULT_COLOR,
+ ballColors = ['#fc636b', '#6a67ce', '#ffb900'],
+ wrapperClass = '',
+ wrapperStyle = {},
+ ariaLabel = 'fidget-spinner-loader',
+ visible = true,
+}: FidgetSpinnerProps) {
+ return !visible ? null : (
+
+ )
+}
diff --git a/src/loader/MagnifyingGlass.tsx b/src/loader/MagnifyingGlass.tsx
new file mode 100644
index 00000000..8dd94147
--- /dev/null
+++ b/src/loader/MagnifyingGlass.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { BaseProps, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+
+interface MagnifyingGlassProps extends BaseProps {
+ glassColor?: string,
+}
+
+export default function MagnifyingGlass({
+ visible = true,
+ height = '80',
+ width = '80',
+ wrapperClass = '',
+ wrapperStyle = {},
+ ariaLabel = 'magnifying-glass-loading',
+ glassColor = '#c0efff',
+ color = '#e15b64',
+}: MagnifyingGlassProps) {
+ return !visible ? null : (
+
+ )
+}
diff --git a/src/loader/ProgressBar.tsx b/src/loader/ProgressBar.tsx
new file mode 100644
index 00000000..54e45e08
--- /dev/null
+++ b/src/loader/ProgressBar.tsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import { BaseProps, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+
+interface ProgressBarProps extends Omit {
+ borderColor?: string,
+ barColor?: string,
+}
+
+export default function ProgressBar({
+ visible = true,
+ height = '80',
+ width = '80',
+ wrapperClass = '',
+ wrapperStyle = {},
+ ariaLabel = 'progress-bar-loading',
+ borderColor = '#F4442E',
+ barColor = '#51E5FF',
+}: ProgressBarProps) {
+ return !visible ? null : (
+
+ )
+}
diff --git a/src/loader/Radio.tsx b/src/loader/Radio.tsx
new file mode 100644
index 00000000..5e2ba867
--- /dev/null
+++ b/src/loader/Radio.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import { BaseProps, DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+
+interface RadioProps extends Omit {
+ colors?: [string, string, string]
+}
+
+export default function Radio({
+ visible = true,
+ height = '80',
+ width = '80',
+ wrapperClass = '',
+ wrapperStyle = {},
+ ariaLabel = 'radio-loading',
+ colors = [DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_COLOR],
+}: RadioProps) {
+ return !visible ? null : (
+
+ )
+}
diff --git a/src/loader/RotatingTriangles.tsx b/src/loader/RotatingTriangles.tsx
new file mode 100644
index 00000000..8e131f84
--- /dev/null
+++ b/src/loader/RotatingTriangles.tsx
@@ -0,0 +1,89 @@
+import React from 'react'
+import { BaseProps, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+
+interface RotatingTrianglesProps extends Omit {
+ colors?: [string, string, string],
+}
+
+export default function RotatingTriangles({
+ visible = true,
+ height = '80',
+ width = '80',
+ wrapperClass = '',
+ wrapperStyle = {},
+ ariaLabel = 'rotating-triangle-loading',
+ colors= ['#1B5299', '#EF8354', '#DB5461'],
+}: RotatingTrianglesProps) {
+ return !visible ? null : (
+
+ )
+}
diff --git a/src/loader/Vortex.tsx b/src/loader/Vortex.tsx
new file mode 100644
index 00000000..c45f13b1
--- /dev/null
+++ b/src/loader/Vortex.tsx
@@ -0,0 +1,76 @@
+import React from 'react'
+import { BaseProps, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+
+interface VortexProps extends Omit {
+ colors?: [string, string, string, string, string, string]
+}
+
+const Vortex = ({
+ visible = true,
+ height = '80',
+ width = '80',
+ ariaLabel = 'vortex-loading',
+ wrapperStyle,
+ wrapperClass,
+ colors = ['#1B5299', '#EF8354', '#DB5461', '#1B5299', '#EF8354', '#DB5461'],
+}: VortexProps) => {
+ return !visible ? null : (
+
+ )
+}
+
+export default Vortex
diff --git a/test/loader/Blocks.spec.tsx b/test/loader/Blocks.spec.tsx
new file mode 100644
index 00000000..05f6dc58
--- /dev/null
+++ b/test/loader/Blocks.spec.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { Blocks } from '../../src'
+import { render, screen } from '@testing-library/react'
+
+const svgTestId = 'blocks-svg'
+
+describe('Blocks', () => {
+ test('should render properly with default props', () => {
+ render()
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'blocks-loading')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveAttribute('height', '80')
+ expect(component).toHaveAttribute('width', '80')
+ })
+
+ test('should render with custom props', () => {
+ render(
+
+ )
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'test-aria-label')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveClass('test-class')
+ expect(component).toHaveStyle('opacity: 1')
+ expect(component).toHaveAttribute('height', '200')
+ expect(component).toHaveAttribute('width', '200')
+
+
+
+ })
+ test('should be hidden when visible is false', () => {
+ render()
+ const element = screen.queryAllByTestId(svgTestId)
+ expect(element).toEqual([])
+ })
+})
diff --git a/test/loader/ColorRing.spec.tsx b/test/loader/ColorRing.spec.tsx
new file mode 100644
index 00000000..6004d10b
--- /dev/null
+++ b/test/loader/ColorRing.spec.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { ColorRing } from '../../src'
+import { render, screen } from '@testing-library/react'
+import { DEFAULT_COLOR } from '../../src/type'
+
+const svgTestId = 'color-ring-svg'
+
+describe('ColorRing', () => {
+ test('should render properly with default props', () => {
+ render()
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'color-ring-loading')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveAttribute('height', '80')
+ expect(component).toHaveAttribute('width', '80')
+ })
+
+ test('should render with custom props', () => {
+ const colors = Array(5).fill(DEFAULT_COLOR as string)
+ render(
+
+ )
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'test-aria-label')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveClass('test-class')
+ expect(component).toHaveStyle('opacity: 1')
+ expect(component).toHaveAttribute('height', '200')
+ expect(component).toHaveAttribute('width', '200')
+ component.querySelectorAll('animate').forEach(animate => {
+ expect(animate).toHaveAttribute('values', colors.join(';').toString())
+ })
+ })
+ test('should be hidden when visible is false', () => {
+ render()
+ const element = screen.queryAllByTestId(svgTestId)
+ expect(element).toEqual([])
+ })
+})
diff --git a/test/loader/Comment.spec.tsx b/test/loader/Comment.spec.tsx
new file mode 100644
index 00000000..e01be87f
--- /dev/null
+++ b/test/loader/Comment.spec.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { Comment } from '../../src'
+import { render, screen } from '@testing-library/react'
+
+const svgTestId = 'comment-svg'
+
+describe('Comment', () => {
+ test('should render properly with default props', () => {
+ render()
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'comment-loading')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveAttribute('height', '80')
+ expect(component).toHaveAttribute('width', '80')
+ })
+
+ test('should render with custom props', () => {
+ render(
+
+ )
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'test-aria-label')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveClass('test-class')
+ expect(component).toHaveStyle('opacity: 1')
+ expect(component).toHaveAttribute('height', '200')
+ expect(component).toHaveAttribute('width', '200')
+ component.querySelectorAll('circle').forEach(circle => {
+ expect(circle).toHaveAttribute('fill', 'red')
+ })
+ component.querySelectorAll('path').forEach(circle => {
+ expect(circle).toHaveAttribute('fill', 'blue')
+ })
+ })
+ test('should be hidden when visible is false', () => {
+ render()
+ const element = screen.queryAllByTestId(svgTestId)
+ expect(element).toEqual([])
+ })
+})
diff --git a/test/loader/DNA.spec.tsx b/test/loader/DNA.spec.tsx
new file mode 100644
index 00000000..d971b95c
--- /dev/null
+++ b/test/loader/DNA.spec.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { DNA } from '../../src'
+import { render, screen } from '@testing-library/react'
+
+const svgTestId = 'dna-svg'
+
+describe('DNA', () => {
+ test('should render properly with default props', () => {
+ render()
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'dna-loading')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveAttribute('height', '80')
+ expect(component).toHaveAttribute('width', '80')
+ })
+
+ test('should render with custom props', () => {
+ render(
+
+ )
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'test-aria-label')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveClass('test-class')
+ expect(component).toHaveStyle('opacity: 1')
+ expect(component).toHaveAttribute('height', '200')
+ expect(component).toHaveAttribute('width', '200')
+ })
+ test('should be hidden when visible is false', () => {
+ render()
+ const element = screen.queryAllByTestId(svgTestId)
+ expect(element).toEqual([])
+ })
+})
diff --git a/test/loader/Discuss.spec.tsx b/test/loader/Discuss.spec.tsx
new file mode 100644
index 00000000..d55ada42
--- /dev/null
+++ b/test/loader/Discuss.spec.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import { Discuss } from '../../src'
+import { render, screen } from '@testing-library/react'
+
+const svgTestId = 'discuss-svg'
+
+describe('Discuss', () => {
+ test('should render properly with default props', () => {
+ render()
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'discuss-loading')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveAttribute('height', '80')
+ expect(component).toHaveAttribute('width', '80')
+ })
+
+ test('should render with custom props', () => {
+ render(
+
+ )
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'test-aria-label')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveClass('test-class')
+ expect(component).toHaveStyle('opacity: 1')
+ expect(component).toHaveAttribute('height', '200')
+ expect(component).toHaveAttribute('width', '200')
+ component.querySelectorAll('path').forEach(circle => {
+ expect(circle).toHaveAttribute('stroke', 'red')
+ })
+ component.querySelectorAll('circle').forEach(path => {
+ expect(path).toHaveAttribute('stroke', 'green')
+ })
+ })
+ test('should be hidden when visible is false', () => {
+ render()
+ const element = screen.queryAllByTestId(svgTestId)
+ expect(element).toEqual([])
+ })
+})
diff --git a/test/loader/FidgetSpinner.spec.tsx b/test/loader/FidgetSpinner.spec.tsx
new file mode 100644
index 00000000..88fab7f4
--- /dev/null
+++ b/test/loader/FidgetSpinner.spec.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { FidgetSpinner } from '../../src'
+import { render, screen } from '@testing-library/react'
+
+const svgTestId = 'fidget-spinner-svg'
+
+describe('Fidget Spinner', () => {
+ test('should render properly with default props', () => {
+ render()
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'fidget-spinner-loader')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveAttribute('height', '80')
+ expect(component).toHaveAttribute('width', '80')
+ })
+
+ test('should render with custom props', () => {
+ const pathColor = ['blue', 'red', 'green']
+ render(
+
+ )
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'test-aria-label')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveClass('test-class')
+ expect(component).toHaveStyle('opacity: 1')
+ expect(component).toHaveAttribute('height', '200')
+ expect(component).toHaveAttribute('width', '200')
+
+ component.querySelectorAll('path').forEach((path, index) => {
+ const color = path.getAttribute('fill')
+ expect(pathColor).toContain(color)
+ })
+ component.querySelectorAll('circle').forEach((circle, index) => {
+ expect(circle).toHaveAttribute('fill', 'yellow')
+ })
+ })
+ test('should be hidden when visible is false', () => {
+ render()
+ const element = screen.queryAllByTestId(svgTestId)
+ expect(element).toEqual([])
+ })
+})
diff --git a/test/loader/MagnifyingGlass.spec.tsx b/test/loader/MagnifyingGlass.spec.tsx
new file mode 100644
index 00000000..1515fac5
--- /dev/null
+++ b/test/loader/MagnifyingGlass.spec.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { MagnifyingGlass } from '../../src'
+import { render, screen } from '@testing-library/react'
+
+const svgTestId = 'magnifying-glass-svg'
+
+describe('DNA', () => {
+ test('should render properly with default props', () => {
+ render()
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'magnifying-glass-loading')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveAttribute('height', '80')
+ expect(component).toHaveAttribute('width', '80')
+ })
+
+ test('should render with custom props', () => {
+ render(
+
+ )
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'test-aria-label')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveClass('test-class')
+ expect(component).toHaveStyle('opacity: 1')
+ expect(component).toHaveAttribute('height', '200')
+ expect(component).toHaveAttribute('width', '200')
+ component.querySelectorAll('path').forEach(path => {
+ const color = path.getAttribute('fill')
+ expect(['red', 'green']).toContain(color)
+ })
+ })
+ test('should be hidden when visible is false', () => {
+ render()
+ const element = screen.queryAllByTestId(svgTestId)
+ expect(element).toEqual([])
+ })
+})
diff --git a/test/loader/ProgressBar.spec.tsx b/test/loader/ProgressBar.spec.tsx
new file mode 100644
index 00000000..8ae3c590
--- /dev/null
+++ b/test/loader/ProgressBar.spec.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { ProgressBar } from '../../src'
+import { render, screen } from '@testing-library/react'
+
+const svgTestId = 'progress-bar-svg'
+
+describe('Progress Bar', () => {
+ test('should render properly with default props', () => {
+ render()
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'progress-bar-loading')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveAttribute('height', '80')
+ expect(component).toHaveAttribute('width', '80')
+ })
+
+ test('should render with custom props', () => {
+ render(
+
+ )
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'test-aria-label')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveClass('test-class')
+ expect(component).toHaveStyle('opacity: 1')
+ expect(component).toHaveAttribute('height', '200')
+ expect(component).toHaveAttribute('width', '200')
+ })
+ test('should be hidden when visible is false', () => {
+ render()
+ const element = screen.queryAllByTestId(svgTestId)
+ expect(element).toEqual([])
+ })
+})
diff --git a/test/loader/Radio.spec.tsx b/test/loader/Radio.spec.tsx
new file mode 100644
index 00000000..97b3e2ec
--- /dev/null
+++ b/test/loader/Radio.spec.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { Radio } from '../../src'
+import { render, screen } from '@testing-library/react'
+
+const svgTestId = 'radio-bar-svg'
+
+describe('Radio', () => {
+ test('should render properly with default props', () => {
+ render()
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'radio-loading')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveAttribute('height', '80')
+ expect(component).toHaveAttribute('width', '80')
+ })
+
+ test('should render with custom props', () => {
+ render(
+
+ )
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'test-aria-label')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveClass('test-class')
+ expect(component).toHaveStyle('opacity: 1')
+ expect(component).toHaveAttribute('height', '200')
+ expect(component).toHaveAttribute('width', '200')
+
+ component.querySelectorAll('path').forEach(path => {
+ const color = path.getAttribute('stroke')
+ expect(['red', 'green', 'blue']).toContain(color)
+ })
+ })
+ test('should be hidden when visible is false', () => {
+ render()
+ const element = screen.queryAllByTestId(svgTestId)
+ expect(element).toEqual([])
+ })
+})
diff --git a/test/loader/RotatingTriangles.spec.tsx b/test/loader/RotatingTriangles.spec.tsx
new file mode 100644
index 00000000..8f1e5c91
--- /dev/null
+++ b/test/loader/RotatingTriangles.spec.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { RotatingTriangles } from '../../src'
+import { render, screen } from '@testing-library/react'
+
+const svgTestId = 'rotating-triangle-svg'
+
+describe('Rotating Triangles', () => {
+ test('should render properly with default props', () => {
+ render()
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'rotating-triangle-loading')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveAttribute('height', '80')
+ expect(component).toHaveAttribute('width', '80')
+ })
+
+ test('should render with custom props', () => {
+ render(
+
+ )
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'test-aria-label')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveClass('test-class')
+ expect(component).toHaveStyle('opacity: 1')
+ expect(component).toHaveAttribute('height', '200')
+ expect(component).toHaveAttribute('width', '200')
+
+ component.querySelectorAll('polygon').forEach(p => {
+ const color = p.getAttribute('fill')
+ expect(['red', 'green', 'blue']).toContain(color)
+ })
+ })
+ test('should be hidden when visible is false', () => {
+ render()
+ const element = screen.queryAllByTestId(svgTestId)
+ expect(element).toEqual([])
+ })
+})
diff --git a/test/loader/Vortex.spec.tsx b/test/loader/Vortex.spec.tsx
new file mode 100644
index 00000000..57625a7f
--- /dev/null
+++ b/test/loader/Vortex.spec.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { Vortex } from '../../src'
+import { render, screen } from '@testing-library/react'
+
+const svgTestId = 'vortex-svg'
+
+describe('Rotating Triangles', () => {
+ test('should render properly with default props', () => {
+ render()
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'vortex-loading')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveAttribute('height', '80')
+ expect(component).toHaveAttribute('width', '80')
+ })
+
+ test('should render with custom props', () => {
+ render(
+
+ )
+ const component = screen.getByTestId(svgTestId)
+ expect(component).toBeDefined()
+ expect(component).toHaveAttribute('aria-label', 'test-aria-label')
+ expect(component).toHaveAttribute('aria-busy', 'true')
+ expect(component).toHaveAttribute('role', 'status')
+ expect(component).toHaveClass('test-class')
+ expect(component).toHaveStyle('opacity: 1')
+ expect(component).toHaveAttribute('height', '200')
+ expect(component).toHaveAttribute('width', '200')
+
+ component.querySelectorAll('path').forEach(p => {
+ const color = p.getAttribute('fill')
+ expect(['red', 'green', 'blue', 'yellow', 'orange', 'purple']).toContain(
+ color
+ )
+ })
+ })
+ test('should be hidden when visible is false', () => {
+ render()
+ const element = screen.queryAllByTestId(svgTestId)
+ expect(element).toEqual([])
+ })
+})