├── .nvmrc
├── .gitignore
├── .npmrc
├── .eslintignore
├── src
    ├── index.js.example
    ├── setupTests.js
    ├── index.js
    └── svg-loader-components
    │   ├── oval.js
    │   ├── tail-spin.js
    │   ├── hearts.js
    │   ├── audio.js
    │   ├── puff.js
    │   ├── three-dots.js
    │   ├── circles.js
    │   ├── ball-triangle.js
    │   ├── rings.js
    │   ├── grid.js
    │   ├── bars.js
    │   └── spinning-circles.js
├── .babelrc
├── test
    ├── bars.test.js
    ├── grid.test.js
    ├── oval.test.js
    ├── puff.test.js
    ├── audio.test.js
    ├── rings.test.js
    ├── hearts.test.js
    ├── circles.test.js
    ├── tail-spin.test.js
    ├── three-dots.test.js
    ├── ball-triangle.test.js
    └── spinning-circles.test.js
├── .github
    └── workflows
    │   └── publish.yml
├── .travis.yml
├── webpack.config.js
├── LICENSE.md
├── .eslintrc.js
├── README.md
├── package.json
└── dist
    └── index.js


/.nvmrc:
--------------------------------------------------------------------------------
1 | v20
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | legacy-peer-deps=true
2 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /dist/
3 | webpack.config.js


--------------------------------------------------------------------------------
/src/index.js.example:
--------------------------------------------------------------------------------
1 | export * from './svg-loader-components/example.js'
2 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/preset-env", "@babel/preset-react"],
3 |   "plugins": [
4 |     "@babel/plugin-proposal-object-rest-spread",
5 |     "transform-react-jsx"
6 |   ]
7 | }


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | import 'jsdom-global/register';
2 | 
3 | import { configure } from 'enzyme';
4 | import Adapter from '@cfaester/enzyme-adapter-react-18';
5 | 
6 | configure({ adapter: new Adapter() });
7 | 


--------------------------------------------------------------------------------
/test/bars.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow, mount } from 'enzyme';
 3 | 
 4 | import { Bars } from '../src/svg-loader-components/bars';
 5 | 
 6 | describe('Test <Bars />', () => {
 7 |   it('renders without crashing', () => {
 8 |     shallow(<Bars />);
 9 |   });
10 |   it('viewBox property is defined', () => {
11 |     const BarsComponent = mount(<Bars />).find('svg');
12 |     expect(BarsComponent.prop('viewBox')).toBeDefined();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/test/grid.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow, mount } from 'enzyme';
 3 | 
 4 | import { Grid } from '../src/svg-loader-components/grid';
 5 | 
 6 | describe('Test <Grid />', () => {
 7 |   it('renders without crashing', () => {
 8 |     shallow(<Grid />);
 9 |   });
10 |   it('viewBox property is defined', () => {
11 |     const GridComponent = mount(<Grid />).find('svg');
12 |     expect(GridComponent.prop('viewBox')).toBeDefined();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/test/oval.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow, mount } from 'enzyme';
 3 | 
 4 | import { Oval } from '../src/svg-loader-components/oval';
 5 | 
 6 | describe('Test <Oval />', () => {
 7 |   it('renders without crashing', () => {
 8 |     shallow(<Oval />);
 9 |   });
10 |   it('viewBox property is defined', () => {
11 |     const OvalComponent = mount(<Oval />).find('svg');
12 |     expect(OvalComponent.prop('viewBox')).toBeDefined();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/test/puff.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow, mount } from 'enzyme';
 3 | 
 4 | import { Puff } from '../src/svg-loader-components/puff';
 5 | 
 6 | describe('Test <Puff />', () => {
 7 |   it('renders without crashing', () => {
 8 |     shallow(<Puff />);
 9 |   });
10 |   it('viewBox property is defined', () => {
11 |     const PuffComponent = mount(<Puff />).find('svg');
12 |     expect(PuffComponent.prop('viewBox')).toBeDefined();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/test/audio.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow, mount } from 'enzyme';
 3 | 
 4 | import { Audio } from '../src/svg-loader-components/audio';
 5 | 
 6 | describe('Test <Audio />', () => {
 7 |   it('renders without crashing', () => {
 8 |     shallow(<Audio />);
 9 |   });
10 |   it('viewBox property is defined', () => {
11 |     const AudioComponent = mount(<Audio />).find('svg');
12 |     expect(AudioComponent.prop('viewBox')).toBeDefined();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/test/rings.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow, mount } from 'enzyme';
 3 | 
 4 | import { Rings } from '../src/svg-loader-components/rings';
 5 | 
 6 | describe('Test <Rings />', () => {
 7 |   it('renders without crashing', () => {
 8 |     shallow(<Rings />);
 9 |   });
10 |   it('viewBox property is defined', () => {
11 |     const RingsComponent = mount(<Rings />).find('svg');
12 |     expect(RingsComponent.prop('viewBox')).toBeDefined();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/test/hearts.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow, mount } from 'enzyme';
 3 | 
 4 | import { Hearts } from '../src/svg-loader-components/hearts';
 5 | 
 6 | describe('Test <Hearts />', () => {
 7 |   it('renders without crashing', () => {
 8 |     shallow(<Hearts />);
 9 |   });
10 |   it('viewBox property is defined', () => {
11 |     const HeartsComponent = mount(<Hearts />).find('svg');
12 |     expect(HeartsComponent.prop('viewBox')).toBeDefined();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/test/circles.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow, mount } from 'enzyme';
 3 | 
 4 | import { Circles } from '../src/svg-loader-components/circles';
 5 | 
 6 | describe('Test <Circles />', () => {
 7 |   it('renders without crashing', () => {
 8 |     shallow(<Circles />);
 9 |   });
10 |   it('viewBox property is defined', () => {
11 |     const CirclesComponent = mount(<Circles />).find('svg');
12 |     expect(CirclesComponent.prop('viewBox')).toBeDefined();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/test/tail-spin.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow, mount } from 'enzyme';
 3 | 
 4 | import { TailSpin } from '../src/svg-loader-components/tail-spin';
 5 | 
 6 | describe('Test <TailSpin />', () => {
 7 |   it('renders without crashing', () => {
 8 |     shallow(<TailSpin />);
 9 |   });
10 |   it('viewBox property is defined', () => {
11 |     const TailSpinComponent = mount(<TailSpin />).find('svg');
12 |     expect(TailSpinComponent.prop('viewBox')).toBeDefined();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/test/three-dots.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow, mount } from 'enzyme';
 3 | 
 4 | import { ThreeDots } from '../src/svg-loader-components/three-dots';
 5 | 
 6 | describe('Test <ThreeDots />', () => {
 7 |   it('renders without crashing', () => {
 8 |     shallow(<ThreeDots />);
 9 |   });
10 |   it('viewBox property is defined', () => {
11 |     const ThreeDotsComponent = mount(<ThreeDots />).find('svg');
12 |     expect(ThreeDotsComponent.prop('viewBox')).toBeDefined();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/test/ball-triangle.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow, mount } from 'enzyme';
 3 | 
 4 | import { BallTriangle } from '../src/svg-loader-components/ball-triangle';
 5 | 
 6 | describe('Test <BallTriangle />', () => {
 7 |   it('renders without crashing', () => {
 8 |     shallow(<BallTriangle />);
 9 |   });
10 |   it('viewBox property is defined', () => {
11 |     const BallTriangleComponent = mount(<BallTriangle />).find('svg');
12 |     expect(BallTriangleComponent.prop('viewBox')).toBeDefined();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/test/spinning-circles.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow, mount } from 'enzyme';
 3 | 
 4 | import { SpinningCircles } from '../src/svg-loader-components/spinning-circles';
 5 | 
 6 | describe('Test <SpinningCircles />', () => {
 7 |   it('renders without crashing', () => {
 8 |     shallow(<SpinningCircles />);
 9 |   });
10 |   it('viewBox property is defined', () => {
11 |     const SpinningCirclesComponent = mount(<SpinningCircles />).find('svg');
12 |     expect(SpinningCirclesComponent.prop('viewBox')).toBeDefined();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish Package to npmjs
 2 | on:
 3 |   release:
 4 |     types: [published]
 5 | 
 6 | jobs:
 7 |   build:
 8 |     runs-on: ubuntu-latest
 9 |     permissions:
10 |       contents: read
11 |       id-token: write
12 |     steps:
13 |       - uses: actions/checkout@v4
14 |       - uses: actions/setup-node@v4
15 |         with:
16 |           node-version: '20.x'
17 |           registry-url: 'https://registry.npmjs.org'
18 |       - run: npm ci
19 |       - run: npm test
20 |       - run: npm publish --provenance --access public
21 |         env:
22 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
23 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | export * from './svg-loader-components/audio.js';
 2 | export * from './svg-loader-components/ball-triangle.js';
 3 | export * from './svg-loader-components/bars.js';
 4 | export * from './svg-loader-components/circles.js';
 5 | export * from './svg-loader-components/grid.js';
 6 | export * from './svg-loader-components/hearts.js';
 7 | export * from './svg-loader-components/oval.js';
 8 | export * from './svg-loader-components/puff.js';
 9 | export * from './svg-loader-components/rings.js';
10 | export * from './svg-loader-components/spinning-circles.js';
11 | export * from './svg-loader-components/tail-spin.js';
12 | export * from './svg-loader-components/three-dots.js';
13 | 


--------------------------------------------------------------------------------
/src/svg-loader-components/oval.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Oval = ({
 4 |   className = undefined, // String
 5 |   ...props
 6 | }) => (
 7 |   <svg width={38} height={38} stroke="#fff" viewBox="0 0 38 38" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
 8 |     <g
 9 |       transform="translate(1 1)"
10 |       strokeWidth={2}
11 |       fill="none"
12 |       fillRule="evenodd"
13 |     >
14 |       <circle strokeOpacity={0.5} cx={18} cy={18} r={18} />
15 |       <path d="M36 18c0-9.94-8.06-18-18-18">
16 |         <animateTransform
17 |           attributeName="transform"
18 |           type="rotate"
19 |           from="0 18 18"
20 |           to="360 18 18"
21 |           dur="1s"
22 |           repeatCount="indefinite"
23 |         />
24 |       </path>
25 |     </g>
26 |   </svg>
27 | );
28 | 
29 | export { Oval };
30 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 | - stable
 4 | cache:
 5 |   directories:
 6 |   - node_modules
 7 | script:
 8 | - npm run lint
 9 | - npm run test
10 | - npm run build
11 | deploy:
12 |   provider: npm
13 |   edge: true
14 |   email: ajwann@ajwann.com
15 |   api_key:
16 |     secure: YkxXF6wD7aSq0jR9kxORYNd01dakfOGyCJnXYiZZSAZQCByKIULw3clXaUo6dIWVyOy/uMU4/sAFmov2HIzrJ4yin2AeoLUKhSPaxKa7C/7/rar1m5jgw4B5vskrCdfsdoyalbnZquWjh+hdA8YV6YMyPyrS19coXdFRFiabIPyAzljiuv+Iquips7HJQuA12FbTsrVyLYloOkUvBLMUv+0JtJxDBJPFRq9RYwt+9jrdh2YADjf2gcpUHyaw7p8gIkNRAsNyWtFi6uPJ5fOP4XWGDoKh7IUMxdP+siN3jsqYR2nPkfFpaO1S4X/4r9R3VpHln4G79B5R/l1k47ZiroHuLQMoC9azUHc+qoLnbBYcCJl9te6JItrfDB4JXqOyNuF3AF6NLhXNeywbuoxcc+ypXGOVkSgTXWbtfsVzuvAN+b5a0Hj6Fkzu5hyYkJ8a4gL/4WxsPK7GoCwzw9CbdXvQR9K3kQpeRFv1vRrdGhKjLbbU+DDZUhojxGIP8CYAJESA/fpKJ7+PiQUQj/tIfu+Hx1mAn5iZIFwKDYuEpMLPGOxIdxj4Nilb8fujCJOSrVqzpo75gpah5yjtE/1T9aRvJN8LuulbaZmJcyxtMoqGwl6KrDGhnXWzsFabZkSQypxuM1+zfJBXyyU0TAh7mx+NpF6EaWz5dXNKgjwbVYs=
17 |   on:
18 |     tags: true
19 |     repo: ajwann/svg-loaders-react
20 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | module.exports = {
 4 |   entry: './src/index.js',
 5 |   output: {
 6 |     path: path.resolve(__dirname, 'dist'),
 7 |     filename: 'index.js',
 8 |     libraryTarget: 'commonjs2',
 9 |   },
10 |   module: {
11 |     rules: [
12 |       {
13 |         test: /\.js$/,
14 |         include: path.resolve(__dirname, 'src'),
15 |         exclude: /(node_modules|bower_components|dist)/,
16 |         use: {
17 |           loader: 'babel-loader',
18 |           options: {
19 |             presets: ['@babel/preset-env'],
20 |             plugins: ['@babel/plugin-proposal-object-rest-spread']
21 |           }
22 |         }
23 |       },
24 |     ],
25 |   },
26 |   externals: {
27 |     react: {
28 |       commonjs: 'react',
29 |       commonjs2: 'react',
30 |       amd: 'React',
31 |       root: 'React',
32 |     },
33 |     'react-dom': {
34 |       commonjs: 'react-dom',
35 |       commonjs2: 'react-dom',
36 |       amd: 'ReactDOM',
37 |       root: 'ReactDOM',
38 |     },
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | **Original Work** Copyright (c) 2014 Sam Herbert
 4 | 
 5 | **Modified Work Copyright (c) 2018 Adam Wanninger**
 6 | 
 7 | Permission is hereby granted, free of charge, to any person obtaining a copy
 8 | of this software and associated documentation files (the "Software"), to deal
 9 | in the Software without restriction, including without limitation the rights
10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11 | copies of the Software, and to permit persons to whom the Software is
12 | furnished to do so, subject to the following conditions:
13 | 
14 | The above copyright notice and this permission notice shall be included in all
15 | copies or substantial portions of the Software.
16 | 
17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23 | SOFTWARE.
24 | 


--------------------------------------------------------------------------------
/src/svg-loader-components/tail-spin.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const TailSpin = ({
 4 |   className = undefined, // String
 5 |   ...props
 6 | }) => (
 7 |   <svg width={38} height={38} viewBox="0 0 38 38" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
 8 |     <defs>
 9 |       <linearGradient
10 |         x1="8.042%"
11 |         y1="0%"
12 |         x2="65.682%"
13 |         y2="23.865%"
14 |         id="prefix__a"
15 |       >
16 |         <stop stopColor="#fff" stopOpacity={0} offset="0%" />
17 |         <stop stopColor="#fff" stopOpacity={0.631} offset="63.146%" />
18 |         <stop stopColor="#fff" offset="100%" />
19 |       </linearGradient>
20 |     </defs>
21 |     <g transform="translate(1 1)" fill="none" fillRule="evenodd">
22 |       <path
23 |         d="M36 18c0-9.94-8.06-18-18-18"
24 |         stroke="url(#prefix__a)"
25 |         strokeWidth={2}
26 |       >
27 |         <animateTransform
28 |           attributeName="transform"
29 |           type="rotate"
30 |           from="0 18 18"
31 |           to="360 18 18"
32 |           dur="0.9s"
33 |           repeatCount="indefinite"
34 |         />
35 |       </path>
36 |       <circle fill="#fff" cx={36} cy={18} r={1}>
37 |         <animateTransform
38 |           attributeName="transform"
39 |           type="rotate"
40 |           from="0 18 18"
41 |           to="360 18 18"
42 |           dur="0.9s"
43 |           repeatCount="indefinite"
44 |         />
45 |       </circle>
46 |     </g>
47 |   </svg>
48 | );
49 | 
50 | export { TailSpin };
51 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // ESLint configuration
 2 | // http://eslint.org/docs/user-guide/configuring
 3 | module.exports = {
 4 |   parser: 'babel-eslint',
 5 | 
 6 |   extends: [
 7 |     'airbnb',
 8 |   ],
 9 | 
10 |   globals: {
11 |     __DEV__: true,
12 |   },
13 | 
14 |   env: {
15 |     node: true,
16 |     browser: true,
17 |     amd: true,
18 |     es6: true,
19 |     jest: true
20 |   },
21 | 
22 |   rules: {
23 |     // `js` and `jsx` are common extensions
24 |     'import/extensions': [
25 |       'error',
26 |       'always',
27 |       {
28 |         js: 'never',
29 |         jsx: 'never',
30 |       },
31 |     ],
32 | 
33 |     'react/jsx-filename-extension': [
34 |       1,
35 |       {
36 |         'extensions': ['.js', '.jsx'],
37 |       },
38 |     ],
39 | 
40 |     // Not supporting nested package.json yet
41 |     // https://github.com/benmosher/eslint-plugin-import/issues/458
42 |     'import/no-extraneous-dependencies': 'off',
43 | 
44 |     // Recommend not to leave any console.log in your code
45 |     // Use console.error, console.warn and console.info instead
46 |     'no-console': [
47 |       'error',
48 |       {
49 |         allow: ['warn', 'error', 'info'],
50 |       },
51 |     ],
52 | 
53 |     // Switching off checks for linebreaks
54 |     'linebreak-style': 'off',
55 | 
56 |     // Switching off default exports
57 |     'import/prefer-default-export': 'off',
58 | 
59 |     // Switching off prop-types, which is disabled in React 18 and removed in React 19
60 |     // See https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes-and-defaultprops
61 |     "react/prop-types": "off"
62 |   },
63 | };
64 | 


--------------------------------------------------------------------------------
/src/svg-loader-components/hearts.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Hearts = ({
 4 |   className = undefined, // String
 5 |   ...props
 6 | }) => (
 7 |   <svg width={140} height={64} fill="#fff" viewBox="0 0 140 64" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
 8 |     <path
 9 |       d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z"
10 |       fillOpacity={0.5}
11 |     >
12 |       <animate
13 |         attributeName="fill-opacity"
14 |         begin="0s"
15 |         dur="1.4s"
16 |         values="0.5;1;0.5"
17 |         calcMode="linear"
18 |         repeatCount="indefinite"
19 |       />
20 |     </path>
21 |     <path
22 |       d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z"
23 |       fillOpacity={0.5}
24 |     >
25 |       <animate
26 |         attributeName="fill-opacity"
27 |         begin="0.7s"
28 |         dur="1.4s"
29 |         values="0.5;1;0.5"
30 |         calcMode="linear"
31 |         repeatCount="indefinite"
32 |       />
33 |     </path>
34 |     <path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z" />
35 |   </svg>
36 | );
37 | 
38 | export { Hearts };
39 | 


--------------------------------------------------------------------------------
/src/svg-loader-components/audio.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Audio = ({
 4 |   className = undefined, // String
 5 |   ...props
 6 | }) => (
 7 |   <svg width={55} height={80} fill="#FFF" viewBox="0 0 55 80" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
 8 |     <g transform="matrix(1 0 0 -1 0 80)">
 9 |       <rect width={10} height={20} rx={3}>
10 |         <animate
11 |           attributeName="height"
12 |           begin="0s"
13 |           dur="4.3s"
14 |           values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20"
15 |           calcMode="linear"
16 |           repeatCount="indefinite"
17 |         />
18 |       </rect>
19 |       <rect x={15} width={10} height={80} rx={3}>
20 |         <animate
21 |           attributeName="height"
22 |           begin="0s"
23 |           dur="2s"
24 |           values="80;55;33;5;75;23;73;33;12;14;60;80"
25 |           calcMode="linear"
26 |           repeatCount="indefinite"
27 |         />
28 |       </rect>
29 |       <rect x={30} width={10} height={50} rx={3}>
30 |         <animate
31 |           attributeName="height"
32 |           begin="0s"
33 |           dur="1.4s"
34 |           values="50;34;78;23;56;23;34;76;80;54;21;50"
35 |           calcMode="linear"
36 |           repeatCount="indefinite"
37 |         />
38 |       </rect>
39 |       <rect x={45} width={10} height={30} rx={3}>
40 |         <animate
41 |           attributeName="height"
42 |           begin="0s"
43 |           dur="2s"
44 |           values="30;45;13;80;56;72;45;76;34;23;67;30"
45 |           calcMode="linear"
46 |           repeatCount="indefinite"
47 |         />
48 |       </rect>
49 |     </g>
50 |   </svg>
51 | );
52 | 
53 | export { Audio };
54 | 


--------------------------------------------------------------------------------
/src/svg-loader-components/puff.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Puff = ({
 4 |   className = undefined, // String
 5 |   ...props
 6 | }) => (
 7 |   <svg width={44} height={44} stroke="#fff" viewBox="0 0 44 44" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
 8 |     <g fill="none" fillRule="evenodd" strokeWidth={2}>
 9 |       <circle cx={22} cy={22} r={1}>
10 |         <animate
11 |           attributeName="r"
12 |           begin="0s"
13 |           dur="1.8s"
14 |           values="1; 20"
15 |           calcMode="spline"
16 |           keyTimes="0; 1"
17 |           keySplines="0.165, 0.84, 0.44, 1"
18 |           repeatCount="indefinite"
19 |         />
20 |         <animate
21 |           attributeName="stroke-opacity"
22 |           begin="0s"
23 |           dur="1.8s"
24 |           values="1; 0"
25 |           calcMode="spline"
26 |           keyTimes="0; 1"
27 |           keySplines="0.3, 0.61, 0.355, 1"
28 |           repeatCount="indefinite"
29 |         />
30 |       </circle>
31 |       <circle cx={22} cy={22} r={1}>
32 |         <animate
33 |           attributeName="r"
34 |           begin="-0.9s"
35 |           dur="1.8s"
36 |           values="1; 20"
37 |           calcMode="spline"
38 |           keyTimes="0; 1"
39 |           keySplines="0.165, 0.84, 0.44, 1"
40 |           repeatCount="indefinite"
41 |         />
42 |         <animate
43 |           attributeName="stroke-opacity"
44 |           begin="-0.9s"
45 |           dur="1.8s"
46 |           values="1; 0"
47 |           calcMode="spline"
48 |           keyTimes="0; 1"
49 |           keySplines="0.3, 0.61, 0.355, 1"
50 |           repeatCount="indefinite"
51 |         />
52 |       </circle>
53 |     </g>
54 |   </svg>
55 | );
56 | 
57 | export { Puff };
58 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![npm version](https://badge.fury.io/js/svg-loaders-react.svg)](https://badge.fury.io/js/svg-loaders-react)
 2 | 
 3 | This is a zero-dependency React adaptation of Sam Herberts [SVG Loaders](https://github.com/SamHerbert/SVG-Loaders) library.
 4 | 
 5 | # Usage
 6 | 
 7 | ## Install from NPM
 8 | ```bash
 9 | npm install svg-loaders-react
10 | ```
11 | 
12 | ## Import the SVGLoaders components
13 | 
14 | ### Import all the loaders in a namespaced fashion
15 | You can import all the loaders at once:
16 | ```js
17 | import * as SVGLoaders from 'svg-loaders-react';
18 | ```
19 | and use them in a namespaced manner:
20 | ```js
21 | <SVGLoaders.Bars />
22 | ```
23 | 
24 | ### Import an individual loader
25 | You can also import a single loader:
26 | ```js
27 | import { Bars } from 'svg-loaders-react'
28 | ```
29 | and use it without any fancy namespacing:
30 | ```js
31 | <Bars />
32 | ```
33 | 
34 | ## Components
35 | 
36 | ```<Audio />```
37 | 
38 | ```<BallTriangle />```
39 | 
40 | ```<Bars />```
41 | 
42 | ```<Circles />```
43 | 
44 | ```<Grid />```
45 | 
46 | ```<Hearts />```
47 | 
48 | ```<Oval />```
49 | 
50 | ```<Puff />```
51 | 
52 | ```<Rings />```
53 | 
54 | ```<SpinningCircles />```
55 | 
56 | ```<TailSpin />```
57 | 
58 | ```<ThreeDots />```
59 | 
60 | # Options
61 | 
62 | Each of these components should be able to accept any [SVG tag presentation attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation) as props. 
63 | 
64 | # Common Usage
65 | ```Javascript
66 | // render the Puff loader with a stroke opacity of .125
67 | <Puff strokeOpacity=".125" />
68 | 
69 | // render the Puff loader with a stroke of mint green
70 | <Puff stroke="#98ff98" />
71 | 
72 | // render the Puff loader with a stroke of mint green and a stroke opactiy of .125
73 | <Puff stroke="#98ff98" strokeOpacity=".125"/>
74 | ```
75 | 
76 | 
77 | 
78 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svg-loaders-react",
 3 |   "version": "3.1.1",
 4 |   "description": "React implementation of the SVG Loaders library by Sam Herbert",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/ajwann/svg-loaders-react"
 8 |   },
 9 |   "main": "dist/index.js",
10 |   "peerDependendies": {
11 |     "react": ">=18",
12 |     "react-dom": ">=18"
13 |   },
14 |   "devDependencies": {
15 |     "@babel/core": "^7.4.5",
16 |     "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
17 |     "@babel/preset-env": "^7.4.5",
18 |     "@babel/preset-react": "^7.0.0",
19 |     "@cfaester/enzyme-adapter-react-18": "^0.8.0",
20 |     "@testing-library/react": "^16.1.0",
21 |     "babel-cli": "^6.26.0",
22 |     "babel-eslint": "^10.0.2",
23 |     "babel-jest": "^29.7.0",
24 |     "babel-loader": "^8.0.6",
25 |     "babel-plugin-transform-react-jsx": "^6.24.1",
26 |     "babel-preset-env": "^1.7.0",
27 |     "enzyme": "^3.10.0",
28 |     "eslint": "^6.0.0",
29 |     "eslint-config-airbnb": "^17.1.0",
30 |     "eslint-plugin-import": "^2.17.3",
31 |     "eslint-plugin-jsx-a11y": "^6.2.1",
32 |     "eslint-plugin-react": "^7.13.0",
33 |     "identity-obj-proxy": "^3.0.0",
34 |     "jest": "^29.7.0",
35 |     "jsdom": "^25.0.1",
36 |     "jsdom-global": "^3.0.2",
37 |     "prop-types": "^15.8.1",
38 |     "react": "^18.3.1",
39 |     "react-dom": "^18.3.1",
40 |     "webpack": "^4.29.0",
41 |     "webpack-cli": "^3.2.1"
42 |   },
43 |   "scripts": {
44 |     "lint": "eslint --ext .js,.ts,.tsx .",
45 |     "lint:fix": "eslint --ext .js,.ts,.tsx . --fix",
46 |     "test": "jest",
47 |     "test:dev": "jest --watch",
48 |     "start": "webpack --watch",
49 |     "build": "webpack --mode production"
50 |   },
51 |   "jest": {
52 |     "setupFiles": [
53 |       "./src/setupTests.js"
54 |     ]
55 |   },
56 |   "keywords": [
57 |     "react",
58 |     "svgloaders",
59 |     "svg",
60 |     "loaders",
61 |     "loader",
62 |     "loading",
63 |     "spinners",
64 |     "spinner"
65 |   ],
66 |   "author": "Adam Wanninger",
67 |   "license": "MIT"
68 | }
69 | 


--------------------------------------------------------------------------------
/src/svg-loader-components/three-dots.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const ThreeDots = ({
 4 |   className = undefined, // String
 5 |   ...props
 6 | }) => (
 7 |   <svg width={120} height={30} fill="#fff" viewBox="0 0 120 30" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
 8 |     <circle cx={15} cy={15} r={15}>
 9 |       <animate
10 |         attributeName="r"
11 |         from={15}
12 |         to={15}
13 |         begin="0s"
14 |         dur="0.8s"
15 |         values="15;9;15"
16 |         calcMode="linear"
17 |         repeatCount="indefinite"
18 |       />
19 |       <animate
20 |         attributeName="fill-opacity"
21 |         from={1}
22 |         to={1}
23 |         begin="0s"
24 |         dur="0.8s"
25 |         values="1;.5;1"
26 |         calcMode="linear"
27 |         repeatCount="indefinite"
28 |       />
29 |     </circle>
30 |     <circle cx={60} cy={15} r={9} fillOpacity={0.3}>
31 |       <animate
32 |         attributeName="r"
33 |         from={9}
34 |         to={9}
35 |         begin="0s"
36 |         dur="0.8s"
37 |         values="9;15;9"
38 |         calcMode="linear"
39 |         repeatCount="indefinite"
40 |       />
41 |       <animate
42 |         attributeName="fill-opacity"
43 |         from={0.5}
44 |         to={0.5}
45 |         begin="0s"
46 |         dur="0.8s"
47 |         values=".5;1;.5"
48 |         calcMode="linear"
49 |         repeatCount="indefinite"
50 |       />
51 |     </circle>
52 |     <circle cx={105} cy={15} r={15}>
53 |       <animate
54 |         attributeName="r"
55 |         from={15}
56 |         to={15}
57 |         begin="0s"
58 |         dur="0.8s"
59 |         values="15;9;15"
60 |         calcMode="linear"
61 |         repeatCount="indefinite"
62 |       />
63 |       <animate
64 |         attributeName="fill-opacity"
65 |         from={1}
66 |         to={1}
67 |         begin="0s"
68 |         dur="0.8s"
69 |         values="1;.5;1"
70 |         calcMode="linear"
71 |         repeatCount="indefinite"
72 |       />
73 |     </circle>
74 |   </svg>
75 | );
76 | 
77 | export { ThreeDots };
78 | 


--------------------------------------------------------------------------------
/src/svg-loader-components/circles.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Circles = ({
 4 |   className = undefined, // String
 5 |   ...props
 6 | }) => (
 7 |   <svg width={135} height={135} fill="#fff" viewBox="0 0 135 135" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
 8 |     <path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z">
 9 |       <animateTransform
10 |         attributeName="transform"
11 |         type="rotate"
12 |         from="0 67 67"
13 |         to="-360 67 67"
14 |         dur="2.5s"
15 |         repeatCount="indefinite"
16 |       />
17 |     </path>
18 |     <path d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z">
19 |       <animateTransform
20 |         attributeName="transform"
21 |         type="rotate"
22 |         from="0 67 67"
23 |         to="360 67 67"
24 |         dur="8s"
25 |         repeatCount="indefinite"
26 |       />
27 |     </path>
28 |   </svg>
29 | );
30 | 
31 | export { Circles };
32 | 


--------------------------------------------------------------------------------
/src/svg-loader-components/ball-triangle.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const BallTriangle = ({
 4 |   className = undefined, // String
 5 |   ...props
 6 | }) => (
 7 |   <svg width={57} height={57} stroke="#fff" viewBox="0 0 57 57" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
 8 |     <g
 9 |       transform="translate(1 1)"
10 |       strokeWidth={2}
11 |       fill="none"
12 |       fillRule="evenodd"
13 |     >
14 |       <circle cx={5} cy={50} r={5}>
15 |         <animate
16 |           attributeName="cy"
17 |           begin="0s"
18 |           dur="2.2s"
19 |           values="50;5;50;50"
20 |           calcMode="linear"
21 |           repeatCount="indefinite"
22 |         />
23 |         <animate
24 |           attributeName="cx"
25 |           begin="0s"
26 |           dur="2.2s"
27 |           values="5;27;49;5"
28 |           calcMode="linear"
29 |           repeatCount="indefinite"
30 |         />
31 |       </circle>
32 |       <circle cx={27} cy={5} r={5}>
33 |         <animate
34 |           attributeName="cy"
35 |           begin="0s"
36 |           dur="2.2s"
37 |           from={5}
38 |           to={5}
39 |           values="5;50;50;5"
40 |           calcMode="linear"
41 |           repeatCount="indefinite"
42 |         />
43 |         <animate
44 |           attributeName="cx"
45 |           begin="0s"
46 |           dur="2.2s"
47 |           from={27}
48 |           to={27}
49 |           values="27;49;5;27"
50 |           calcMode="linear"
51 |           repeatCount="indefinite"
52 |         />
53 |       </circle>
54 |       <circle cx={49} cy={50} r={5}>
55 |         <animate
56 |           attributeName="cy"
57 |           begin="0s"
58 |           dur="2.2s"
59 |           values="50;50;5;50"
60 |           calcMode="linear"
61 |           repeatCount="indefinite"
62 |         />
63 |         <animate
64 |           attributeName="cx"
65 |           from={49}
66 |           to={49}
67 |           begin="0s"
68 |           dur="2.2s"
69 |           values="49;5;27;49"
70 |           calcMode="linear"
71 |           repeatCount="indefinite"
72 |         />
73 |       </circle>
74 |     </g>
75 |   </svg>
76 | );
77 | 
78 | export { BallTriangle };
79 | 


--------------------------------------------------------------------------------
/src/svg-loader-components/rings.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Rings = ({
 4 |   className = undefined, // String
 5 |   ...props
 6 | }) => (
 7 |   <svg width={45} height={45} stroke="#fff" viewBox="0 0 45 45" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
 8 |     <g
 9 |       fill="none"
10 |       fillRule="evenodd"
11 |       transform="translate(1 1)"
12 |       strokeWidth={2}
13 |     >
14 |       <circle cx={22} cy={22} r={6} strokeOpacity={0}>
15 |         <animate
16 |           attributeName="r"
17 |           begin="1.5s"
18 |           dur="3s"
19 |           values="6;22"
20 |           calcMode="linear"
21 |           repeatCount="indefinite"
22 |         />
23 |         <animate
24 |           attributeName="stroke-opacity"
25 |           begin="1.5s"
26 |           dur="3s"
27 |           values="1;0"
28 |           calcMode="linear"
29 |           repeatCount="indefinite"
30 |         />
31 |         <animate
32 |           attributeName="stroke-width"
33 |           begin="1.5s"
34 |           dur="3s"
35 |           values="2;0"
36 |           calcMode="linear"
37 |           repeatCount="indefinite"
38 |         />
39 |       </circle>
40 |       <circle cx={22} cy={22} r={6} strokeOpacity={0}>
41 |         <animate
42 |           attributeName="r"
43 |           begin="3s"
44 |           dur="3s"
45 |           values="6;22"
46 |           calcMode="linear"
47 |           repeatCount="indefinite"
48 |         />
49 |         <animate
50 |           attributeName="stroke-opacity"
51 |           begin="3s"
52 |           dur="3s"
53 |           values="1;0"
54 |           calcMode="linear"
55 |           repeatCount="indefinite"
56 |         />
57 |         <animate
58 |           attributeName="stroke-width"
59 |           begin="3s"
60 |           dur="3s"
61 |           values="2;0"
62 |           calcMode="linear"
63 |           repeatCount="indefinite"
64 |         />
65 |       </circle>
66 |       <circle cx={22} cy={22} r={8}>
67 |         <animate
68 |           attributeName="r"
69 |           begin="0s"
70 |           dur="1.5s"
71 |           values="6;1;2;3;4;5;6"
72 |           calcMode="linear"
73 |           repeatCount="indefinite"
74 |         />
75 |       </circle>
76 |     </g>
77 |   </svg>
78 | );
79 | 
80 | export { Rings };
81 | 


--------------------------------------------------------------------------------
/src/svg-loader-components/grid.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | 
  3 | const Grid = ({
  4 |   className = undefined, // String
  5 |   ...props
  6 | }) => (
  7 |   <svg width={105} height={105} fill="#fff" viewBox="0 0 105 105" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
  8 |     <circle cx={12.5} cy={12.5} r={12.5}>
  9 |       <animate
 10 |         attributeName="fill-opacity"
 11 |         begin="0s"
 12 |         dur="1s"
 13 |         values="1;.2;1"
 14 |         calcMode="linear"
 15 |         repeatCount="indefinite"
 16 |       />
 17 |     </circle>
 18 |     <circle cx={12.5} cy={52.5} r={12.5} fillOpacity={0.5}>
 19 |       <animate
 20 |         attributeName="fill-opacity"
 21 |         begin="100ms"
 22 |         dur="1s"
 23 |         values="1;.2;1"
 24 |         calcMode="linear"
 25 |         repeatCount="indefinite"
 26 |       />
 27 |     </circle>
 28 |     <circle cx={52.5} cy={12.5} r={12.5}>
 29 |       <animate
 30 |         attributeName="fill-opacity"
 31 |         begin="300ms"
 32 |         dur="1s"
 33 |         values="1;.2;1"
 34 |         calcMode="linear"
 35 |         repeatCount="indefinite"
 36 |       />
 37 |     </circle>
 38 |     <circle cx={52.5} cy={52.5} r={12.5}>
 39 |       <animate
 40 |         attributeName="fill-opacity"
 41 |         begin="600ms"
 42 |         dur="1s"
 43 |         values="1;.2;1"
 44 |         calcMode="linear"
 45 |         repeatCount="indefinite"
 46 |       />
 47 |     </circle>
 48 |     <circle cx={92.5} cy={12.5} r={12.5}>
 49 |       <animate
 50 |         attributeName="fill-opacity"
 51 |         begin="800ms"
 52 |         dur="1s"
 53 |         values="1;.2;1"
 54 |         calcMode="linear"
 55 |         repeatCount="indefinite"
 56 |       />
 57 |     </circle>
 58 |     <circle cx={92.5} cy={52.5} r={12.5}>
 59 |       <animate
 60 |         attributeName="fill-opacity"
 61 |         begin="400ms"
 62 |         dur="1s"
 63 |         values="1;.2;1"
 64 |         calcMode="linear"
 65 |         repeatCount="indefinite"
 66 |       />
 67 |     </circle>
 68 |     <circle cx={12.5} cy={92.5} r={12.5}>
 69 |       <animate
 70 |         attributeName="fill-opacity"
 71 |         begin="700ms"
 72 |         dur="1s"
 73 |         values="1;.2;1"
 74 |         calcMode="linear"
 75 |         repeatCount="indefinite"
 76 |       />
 77 |     </circle>
 78 |     <circle cx={52.5} cy={92.5} r={12.5}>
 79 |       <animate
 80 |         attributeName="fill-opacity"
 81 |         begin="500ms"
 82 |         dur="1s"
 83 |         values="1;.2;1"
 84 |         calcMode="linear"
 85 |         repeatCount="indefinite"
 86 |       />
 87 |     </circle>
 88 |     <circle cx={92.5} cy={92.5} r={12.5}>
 89 |       <animate
 90 |         attributeName="fill-opacity"
 91 |         begin="200ms"
 92 |         dur="1s"
 93 |         values="1;.2;1"
 94 |         calcMode="linear"
 95 |         repeatCount="indefinite"
 96 |       />
 97 |     </circle>
 98 |   </svg>
 99 | );
100 | 
101 | export { Grid };
102 | 


--------------------------------------------------------------------------------
/src/svg-loader-components/bars.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | 
  3 | const Bars = ({
  4 |   className = undefined, // String
  5 |   ...props
  6 | }) => (
  7 |   <svg width={135} height={140} fill="#fff" viewBox="0 0 135 140" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
  8 |     <rect y={10} width={15} height={120} rx={6}>
  9 |       <animate
 10 |         attributeName="height"
 11 |         begin="0.5s"
 12 |         dur="1s"
 13 |         values="120;110;100;90;80;70;60;50;40;140;120"
 14 |         calcMode="linear"
 15 |         repeatCount="indefinite"
 16 |       />
 17 |       <animate
 18 |         attributeName="y"
 19 |         begin="0.5s"
 20 |         dur="1s"
 21 |         values="10;15;20;25;30;35;40;45;50;0;10"
 22 |         calcMode="linear"
 23 |         repeatCount="indefinite"
 24 |       />
 25 |     </rect>
 26 |     <rect x={30} y={10} width={15} height={120} rx={6}>
 27 |       <animate
 28 |         attributeName="height"
 29 |         begin="0.25s"
 30 |         dur="1s"
 31 |         values="120;110;100;90;80;70;60;50;40;140;120"
 32 |         calcMode="linear"
 33 |         repeatCount="indefinite"
 34 |       />
 35 |       <animate
 36 |         attributeName="y"
 37 |         begin="0.25s"
 38 |         dur="1s"
 39 |         values="10;15;20;25;30;35;40;45;50;0;10"
 40 |         calcMode="linear"
 41 |         repeatCount="indefinite"
 42 |       />
 43 |     </rect>
 44 |     <rect x={60} width={15} height={140} rx={6}>
 45 |       <animate
 46 |         attributeName="height"
 47 |         begin="0s"
 48 |         dur="1s"
 49 |         values="120;110;100;90;80;70;60;50;40;140;120"
 50 |         calcMode="linear"
 51 |         repeatCount="indefinite"
 52 |       />
 53 |       <animate
 54 |         attributeName="y"
 55 |         begin="0s"
 56 |         dur="1s"
 57 |         values="10;15;20;25;30;35;40;45;50;0;10"
 58 |         calcMode="linear"
 59 |         repeatCount="indefinite"
 60 |       />
 61 |     </rect>
 62 |     <rect x={90} y={10} width={15} height={120} rx={6}>
 63 |       <animate
 64 |         attributeName="height"
 65 |         begin="0.25s"
 66 |         dur="1s"
 67 |         values="120;110;100;90;80;70;60;50;40;140;120"
 68 |         calcMode="linear"
 69 |         repeatCount="indefinite"
 70 |       />
 71 |       <animate
 72 |         attributeName="y"
 73 |         begin="0.25s"
 74 |         dur="1s"
 75 |         values="10;15;20;25;30;35;40;45;50;0;10"
 76 |         calcMode="linear"
 77 |         repeatCount="indefinite"
 78 |       />
 79 |     </rect>
 80 |     <rect x={120} y={10} width={15} height={120} rx={6}>
 81 |       <animate
 82 |         attributeName="height"
 83 |         begin="0.5s"
 84 |         dur="1s"
 85 |         values="120;110;100;90;80;70;60;50;40;140;120"
 86 |         calcMode="linear"
 87 |         repeatCount="indefinite"
 88 |       />
 89 |       <animate
 90 |         attributeName="y"
 91 |         begin="0.5s"
 92 |         dur="1s"
 93 |         values="10;15;20;25;30;35;40;45;50;0;10"
 94 |         calcMode="linear"
 95 |         repeatCount="indefinite"
 96 |       />
 97 |     </rect>
 98 |   </svg>
 99 | );
100 | 
101 | export { Bars };
102 | 


--------------------------------------------------------------------------------
/src/svg-loader-components/spinning-circles.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | 
  3 | const SpinningCircles = ({
  4 |   className = undefined, // String
  5 |   ...props
  6 | }) => (
  7 |   <svg width={58} height={58} viewBox="0 0 58 58" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
  8 |     <g
  9 |       transform="translate(2 1)"
 10 |       stroke="#FFF"
 11 |       strokeWidth={1.5}
 12 |       fill="#fff"
 13 |       fillRule="evenodd"
 14 |     >
 15 |       <circle cx={42.601} cy={11.462} r={5}>
 16 |         <animate
 17 |           attributeName="fill-opacity"
 18 |           begin="0s"
 19 |           dur="1.3s"
 20 |           values="1;0;0;0;0;0;0;0"
 21 |           calcMode="linear"
 22 |           repeatCount="indefinite"
 23 |         />
 24 |       </circle>
 25 |       <circle cx={49.063} cy={27.063} r={5} fillOpacity={0}>
 26 |         <animate
 27 |           attributeName="fill-opacity"
 28 |           begin="0s"
 29 |           dur="1.3s"
 30 |           values="0;1;0;0;0;0;0;0"
 31 |           calcMode="linear"
 32 |           repeatCount="indefinite"
 33 |         />
 34 |       </circle>
 35 |       <circle cx={42.601} cy={42.663} r={5} fillOpacity={0}>
 36 |         <animate
 37 |           attributeName="fill-opacity"
 38 |           begin="0s"
 39 |           dur="1.3s"
 40 |           values="0;0;1;0;0;0;0;0"
 41 |           calcMode="linear"
 42 |           repeatCount="indefinite"
 43 |         />
 44 |       </circle>
 45 |       <circle cx={27} cy={49.125} r={5} fillOpacity={0}>
 46 |         <animate
 47 |           attributeName="fill-opacity"
 48 |           begin="0s"
 49 |           dur="1.3s"
 50 |           values="0;0;0;1;0;0;0;0"
 51 |           calcMode="linear"
 52 |           repeatCount="indefinite"
 53 |         />
 54 |       </circle>
 55 |       <circle cx={11.399} cy={42.663} r={5} fillOpacity={0}>
 56 |         <animate
 57 |           attributeName="fill-opacity"
 58 |           begin="0s"
 59 |           dur="1.3s"
 60 |           values="0;0;0;0;1;0;0;0"
 61 |           calcMode="linear"
 62 |           repeatCount="indefinite"
 63 |         />
 64 |       </circle>
 65 |       <circle cx={4.938} cy={27.063} r={5} fillOpacity={0}>
 66 |         <animate
 67 |           attributeName="fill-opacity"
 68 |           begin="0s"
 69 |           dur="1.3s"
 70 |           values="0;0;0;0;0;1;0;0"
 71 |           calcMode="linear"
 72 |           repeatCount="indefinite"
 73 |         />
 74 |       </circle>
 75 |       <circle cx={11.399} cy={11.462} r={5} fillOpacity={0}>
 76 |         <animate
 77 |           attributeName="fill-opacity"
 78 |           begin="0s"
 79 |           dur="1.3s"
 80 |           values="0;0;0;0;0;0;1;0"
 81 |           calcMode="linear"
 82 |           repeatCount="indefinite"
 83 |         />
 84 |       </circle>
 85 |       <circle cx={27} cy={5} r={5} fillOpacity={0}>
 86 |         <animate
 87 |           attributeName="fill-opacity"
 88 |           begin="0s"
 89 |           dur="1.3s"
 90 |           values="0;0;0;0;0;0;0;1"
 91 |           calcMode="linear"
 92 |           repeatCount="indefinite"
 93 |         />
 94 |       </circle>
 95 |     </g>
 96 |   </svg>
 97 | );
 98 | 
 99 | export { SpinningCircles };
100 | 


--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
1 | module.exports=function(e){var t={};function a(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,a),n.l=!0,n.exports}return a.m=e,a.c=t,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=1)}([function(e,t){e.exports=require("react")},function(e,t,a){"use strict";a.r(t),a.d(t,"Audio",(function(){return l})),a.d(t,"BallTriangle",(function(){return o})),a.d(t,"Bars",(function(){return s})),a.d(t,"Circles",(function(){return m})),a.d(t,"Grid",(function(){return v})),a.d(t,"Hearts",(function(){return b})),a.d(t,"Oval",(function(){return y})),a.d(t,"Puff",(function(){return E})),a.d(t,"Rings",(function(){return N})),a.d(t,"SpinningCircles",(function(){return x})),a.d(t,"TailSpin",(function(){return C})),a.d(t,"ThreeDots",(function(){return P}));var r=a(0),n=a.n(r);function i(){return(i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var l=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",i({width:55,height:80,fill:"#FFF",viewBox:"0 0 55 80",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("g",{transform:"matrix(1 0 0 -1 0 80)"},n.a.createElement("rect",{width:10,height:20,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"4.3s",values:"20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:15,width:10,height:80,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"2s",values:"80;55;33;5;75;23;73;33;12;14;60;80",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:30,width:10,height:50,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"1.4s",values:"50;34;78;23;56;23;34;76;80;54;21;50",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:45,width:10,height:30,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"2s",values:"30;45;13;80;56;72;45;76;34;23;67;30",calcMode:"linear",repeatCount:"indefinite"}))))};function c(){return(c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var o=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",c({width:57,height:57,stroke:"#fff",viewBox:"0 0 57 57",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("g",{transform:"translate(1 1)",strokeWidth:2,fill:"none",fillRule:"evenodd"},n.a.createElement("circle",{cx:5,cy:50,r:5},n.a.createElement("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;5;50;50",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",values:"5;27;49;5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:27,cy:5,r:5},n.a.createElement("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",from:5,to:5,values:"5;50;50;5",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",from:27,to:27,values:"27;49;5;27",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:49,cy:50,r:5},n.a.createElement("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;50;5;50",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"cx",from:49,to:49,begin:"0s",dur:"2.2s",values:"49;5;27;49",calcMode:"linear",repeatCount:"indefinite"}))))};function u(){return(u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var s=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",u({width:135,height:140,fill:"#fff",viewBox:"0 0 135 140",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("rect",{y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:30,y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:60,width:15,height:140,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:90,y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:120,y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})))};function f(){return(f=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var m=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",f({width:135,height:135,fill:"#fff",viewBox:"0 0 135 135",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("path",{d:"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 67 67",to:"-360 67 67",dur:"2.5s",repeatCount:"indefinite"})),n.a.createElement("path",{d:"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 67 67",to:"360 67 67",dur:"8s",repeatCount:"indefinite"})))};function d(){return(d=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var v=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",d({width:105,height:105,fill:"#fff",viewBox:"0 0 105 105",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("circle",{cx:12.5,cy:12.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:12.5,cy:52.5,r:12.5,fillOpacity:.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"100ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:52.5,cy:12.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"300ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:52.5,cy:52.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"600ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:92.5,cy:12.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"800ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:92.5,cy:52.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"400ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:12.5,cy:92.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"700ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:52.5,cy:92.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"500ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:92.5,cy:92.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"200ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})))};function p(){return(p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var b=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",p({width:140,height:64,fill:"#fff",viewBox:"0 0 140 64",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("path",{d:"M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z",fillOpacity:.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.4s",values:"0.5;1;0.5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("path",{d:"M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z",fillOpacity:.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0.7s",dur:"1.4s",values:"0.5;1;0.5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("path",{d:"M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"}))};function g(){return(g=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var y=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",g({width:38,height:38,stroke:"#fff",viewBox:"0 0 38 38",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("g",{transform:"translate(1 1)",strokeWidth:2,fill:"none",fillRule:"evenodd"},n.a.createElement("circle",{strokeOpacity:.5,cx:18,cy:18,r:18}),n.a.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18"},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"}))))};function h(){return(h=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var E=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",h({width:44,height:44,stroke:"#fff",viewBox:"0 0 44 44",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("g",{fill:"none",fillRule:"evenodd",strokeWidth:2},n.a.createElement("circle",{cx:22,cy:22,r:1},n.a.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"0s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:22,cy:22,r:1},n.a.createElement("animate",{attributeName:"r",begin:"-0.9s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"-0.9s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"}))))};function O(){return(O=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var N=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",O({width:45,height:45,stroke:"#fff",viewBox:"0 0 45 45",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:2},n.a.createElement("circle",{cx:22,cy:22,r:6,strokeOpacity:0},n.a.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:22,cy:22,r:6,strokeOpacity:0},n.a.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:22,cy:22,r:8},n.a.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))};function w(){return(w=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var x=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",w({width:58,height:58,viewBox:"0 0 58 58",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("g",{transform:"translate(2 1)",stroke:"#FFF",strokeWidth:1.5,fill:"#fff",fillRule:"evenodd"},n.a.createElement("circle",{cx:42.601,cy:11.462,r:5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"1;0;0;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:49.063,cy:27.063,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;1;0;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:42.601,cy:42.663,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;1;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:27,cy:49.125,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;1;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:11.399,cy:42.663,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;1;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:4.938,cy:27.063,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;1;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:11.399,cy:11.462,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;0;1;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:27,cy:5,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;0;0;1",calcMode:"linear",repeatCount:"indefinite"}))))};function M(){return(M=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var C=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",M({width:38,height:38,viewBox:"0 0 38 38",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("defs",null,n.a.createElement("linearGradient",{x1:"8.042%",y1:"0%",x2:"65.682%",y2:"23.865%",id:"prefix__a"},n.a.createElement("stop",{stopColor:"#fff",stopOpacity:0,offset:"0%"}),n.a.createElement("stop",{stopColor:"#fff",stopOpacity:.631,offset:"63.146%"}),n.a.createElement("stop",{stopColor:"#fff",offset:"100%"}))),n.a.createElement("g",{transform:"translate(1 1)",fill:"none",fillRule:"evenodd"},n.a.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18",stroke:"url(#prefix__a)",strokeWidth:2},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"})),n.a.createElement("circle",{fill:"#fff",cx:36,cy:18,r:1},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"}))))};function j(){return(j=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var P=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",j({width:120,height:30,fill:"#fff",viewBox:"0 0 120 30",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("circle",{cx:15,cy:15,r:15},n.a.createElement("animate",{attributeName:"r",from:15,to:15,begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"fill-opacity",from:1,to:1,begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:60,cy:15,r:9,fillOpacity:.3},n.a.createElement("animate",{attributeName:"r",from:9,to:9,begin:"0s",dur:"0.8s",values:"9;15;9",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"fill-opacity",from:.5,to:.5,begin:"0s",dur:"0.8s",values:".5;1;.5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:105,cy:15,r:15},n.a.createElement("animate",{attributeName:"r",from:15,to:15,begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"fill-opacity",from:1,to:1,begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})))}}]);


--------------------------------------------------------------------------------