├── .gitignore ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── __tests__ ├── RotatingBoxesLoader.test.tsx └── __snapshots__ │ └── RotatingBoxesLoader.test.tsx.snap ├── jestconfig.json ├── lib ├── alternatingOrbits │ ├── AlternatingOrbitsLoader.d.ts │ └── AlternatingOrbitsLoader.js ├── atom │ ├── AtomLoader.d.ts │ └── AtomLoader.js ├── bars │ ├── BarsLoader.d.ts │ └── BarsLoader.js ├── bars2 │ ├── BarsLoader2.d.ts │ └── BarsLoader2.js ├── battery │ ├── BatteryLoader.d.ts │ └── BatteryLoader.js ├── blob │ ├── BlobLoader.d.ts │ └── BlobLoader.js ├── blurrySquare │ ├── BlurrySquareLoader.d.ts │ └── BlurrySquareLoader.js ├── bouncyBalls │ ├── BouncyBallsLoader.d.ts │ └── BouncyBallsLoader.js ├── brokenCircles │ ├── BrokenCirclesLoader.d.ts │ └── BrokenCirclesLoader.js ├── circleFade │ ├── CircleFadeLoader.d.ts │ └── CircleFadeLoader.js ├── circlePop │ ├── CirclePopLoader.d.ts │ └── CirclePopLoader.js ├── clock │ ├── ClockLoader.d.ts │ └── ClockLoader.js ├── dots │ ├── DotsLoader.d.ts │ └── DotsLoader.js ├── doubleSquare │ ├── DoubleSquareLoader.d.ts │ └── DoubleSquareLoader.js ├── drawWave │ ├── DrawWaveLoader.d.ts │ └── DrawWaveLoader.js ├── dyingLight │ ├── DyingLightLoader.d.ts │ └── DyingLightLoader.js ├── eightBit │ ├── EightBitLoader.d.ts │ └── EightBitLoader.js ├── elasticCircle │ ├── ElasticCircleLoader.d.ts │ └── ElasticCircleLoader.js ├── fillCircle │ ├── FillCircleLoader.d.ts │ └── FillCircleLoader.js ├── fillSquare │ ├── FillSquareLoader.d.ts │ └── FillSquareLoader.js ├── flip │ ├── FlipLoader.d.ts │ └── FlipLoader.js ├── flippingCube │ ├── FlippingCubeLoader.d.ts │ └── FlippingCubeLoader.js ├── gooey1 │ ├── GooeyLoader1.d.ts │ └── GooeyLoader1.js ├── gooey2 │ ├── GooeyLoader2.d.ts │ └── GooeyLoader2.js ├── gooeyCircle │ ├── GooeyCircleLoader.d.ts │ └── GooeyCircleLoader.js ├── helix │ ├── HelixLoader.d.ts │ └── HelixLoader.js ├── hydrogen │ ├── HydrogenLoader.d.ts │ └── HydrogenLoader.js ├── hypnosis │ ├── HypnosisLoader.d.ts │ └── HypnosisLoader.js ├── index.d.ts ├── index.js ├── jellyBounce │ ├── JellyBounceLoader.d.ts │ └── JellyBounceLoader.js ├── kissyBalls │ ├── KissyBallsLoader.d.ts │ └── KissyBallsLoader.js ├── line │ ├── LineLoader.d.ts │ └── LineLoader.js ├── linneard │ ├── LinneardLoader.d.ts │ └── LinneardLoader.js ├── liquid │ ├── LiquidLoader.d.ts │ └── LiquidLoader.js ├── movingSquare │ ├── MovingSquareLoader.d.ts │ └── MovingSquareLoader.js ├── notepad │ ├── NotepadLoader.d.ts │ └── NotepadLoader.js ├── pingPong │ ├── PingPongLoader.d.ts │ └── PingPongLoader.js ├── pip │ ├── PipLoader.d.ts │ └── PipLoader.js ├── pulseBubble │ ├── PulseBubbleLoader.d.ts │ └── PulseBubbleLoader.js ├── rotatingBoxes │ ├── RotatingBoxesLoader.d.ts │ └── RotatingBoxesLoader.js ├── rotatingCircle │ ├── RotatingCircleLoader.d.ts │ └── RotatingCircleLoader.js ├── slices │ ├── SlicesLoader.d.ts │ └── SlicesLoader.js ├── slidingCube │ ├── SlidingCubeLoader.d.ts │ └── SlidingCubeLoader.js ├── sphere │ ├── SphereLoader.d.ts │ └── SphereLoader.js ├── spinningCircle │ ├── SpinningCircleLoader.d.ts │ └── SpinningCircleLoader.js ├── spinningOrbit │ ├── SpinningOrbitLoader.d.ts │ └── SpinningOrbitLoader.js ├── swingingCube │ ├── SwingingCubeLoader.d.ts │ └── SwingingCubeLoader.js ├── switchingCube │ ├── SwitchingCubeLoader.d.ts │ └── SwitchingCubeLoader.js ├── texture │ ├── TextureLoader.d.ts │ └── TextureLoader.js ├── utilities │ ├── utilities.d.ts │ └── utilities.js ├── volume │ ├── VolumeLoader.d.ts │ └── VolumeLoader.js ├── vortex │ ├── VortexLoader.d.ts │ └── VortexLoader.js ├── wave │ ├── WaveLoader.d.ts │ └── WaveLoader.js └── wrapper │ ├── wrapper.d.ts │ └── wrapper.js ├── package-lock.json ├── package.json ├── src ├── alternatingOrbits │ └── AlternatingOrbitsLoader.tsx ├── atom │ └── AtomLoader.tsx ├── bars │ └── BarsLoader.tsx ├── bars2 │ └── BarsLoader2.tsx ├── battery │ └── BatteryLoader.tsx ├── blob │ └── BlobLoader.tsx ├── blurrySquare │ └── BlurrySquareLoader.tsx ├── bouncyBalls │ └── BouncyBallsLoader.tsx ├── brokenCircles │ └── BrokenCirclesLoader.tsx ├── circleFade │ └── CircleFadeLoader.tsx ├── circlePop │ └── CirclePopLoader.tsx ├── clock │ └── ClockLoader.tsx ├── dots │ └── DotsLoader.tsx ├── doubleSquare │ └── DoubleSquareLoader.tsx ├── drawWave │ └── DrawWaveLoader.tsx ├── dyingLight │ └── DyingLightLoader.tsx ├── eightBit │ └── EightBitLoader.tsx ├── elasticCircle │ └── ElasticCircleLoader.tsx ├── fillCircle │ └── FillCircleLoader.tsx ├── fillSquare │ └── FillSquareLoader.tsx ├── flip │ └── FlipLoader.tsx ├── flippingCube │ └── FlippingCubeLoader.tsx ├── gooey1 │ └── GooeyLoader1.tsx ├── gooey2 │ └── GooeyLoader2.tsx ├── gooeyCircle │ └── GooeyCircleLoader.tsx ├── helix │ └── HelixLoader.tsx ├── hydrogen │ └── HydrogenLoader.tsx ├── hypnosis │ └── HypnosisLoader.tsx ├── index.ts ├── jellyBounce │ └── JellyBounceLoader.tsx ├── kissyBalls │ └── KissyBallsLoader.tsx ├── line │ └── LineLoader.tsx ├── linneard │ └── LinneardLoader.tsx ├── liquid │ └── LiquidLoader.tsx ├── movingSquare │ └── MovingSquareLoader.tsx ├── notepad │ └── NotepadLoader.tsx ├── pingPong │ └── PingPongLoader.tsx ├── pip │ └── PipLoader.tsx ├── pulseBubble │ └── PulseBubbleLoader.tsx ├── rotatingBoxes │ └── RotatingBoxesLoader.tsx ├── rotatingCircle │ └── RotatingCircleLoader.tsx ├── slices │ └── SlicesLoader.tsx ├── slidingCube │ └── SlidingCubeLoader.tsx ├── sphere │ └── SphereLoader.tsx ├── spinningCircle │ └── SpinningCircleLoader.tsx ├── spinningOrbit │ └── SpinningOrbitLoader.tsx ├── swingingCube │ └── SwingingCubeLoader.tsx ├── switchingCube │ └── SwitchingCubeLoader.tsx ├── texture │ └── TextureLoader.tsx ├── utilities │ └── utilities.ts ├── volume │ └── VolumeLoader.tsx ├── vortex │ └── VortexLoader.tsx ├── wave │ └── WaveLoader.tsx └── wrapper │ └── wrapper.tsx └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 0.1.3 2 | 3 | - Updated README and added code of conduct 4 | 5 | ## 0.1.2 6 | 7 | - README clean up 8 | 9 | ## 0.1.1 10 | 11 | - README Update 12 | 13 | ## 0.1.0 14 | 15 | - Added loaders to the kit. 16 | - This package was written using the [Emotion](https://emotion.sh/docs/introduction) css library. -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at seimodeikingsley@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Bratua Seimodei 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /__tests__/RotatingBoxesLoader.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { configure, mount } from 'enzyme'; 3 | import Adapter from 'enzyme-adapter-react-16'; 4 | 5 | import { RotatingBoxesLoader } from '../lib/index'; 6 | 7 | configure({ adapter: new Adapter() }); 8 | 9 | 10 | describe('RotatingBoxesLoader', () => { 11 | describe('default', () => { 12 | const wrapper = mount(); 13 | const props = wrapper.props(); 14 | 15 | it('should match snapshot', () => { 16 | expect(wrapper.find(RotatingBoxesLoader)).toMatchSnapshot(); 17 | }) 18 | 19 | it('should render with default loading true', () => { 20 | expect(props.loading).toEqual(true); 21 | }) 22 | }); 23 | }); 24 | 25 | -------------------------------------------------------------------------------- /__tests__/__snapshots__/RotatingBoxesLoader.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`RotatingBoxesLoader default should match snapshot 1`] = ` 4 | 7 | 11 | 12 |
15 | 16 |
19 | 26 |
34 | 35 |
36 | 37 | 38 |
41 | 48 |
56 | 57 |
58 | 59 |
60 | 61 | 62 | 63 | `; 64 | -------------------------------------------------------------------------------- /jestconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "transform": { 3 | "^.+\\.(t|j)sx?$": "ts-jest" 4 | }, 5 | "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$", 6 | "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"], 7 | "setupFilesAfterEnv": ["./node_modules/jest-enzyme/lib/index.js"] 8 | } -------------------------------------------------------------------------------- /lib/alternatingOrbits/AlternatingOrbitsLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface AlternatingOrbitsProps { 3 | loading: boolean; 4 | pause?: boolean; 5 | size?: number; 6 | colors?: string[]; 7 | } 8 | declare const AlternatingOrbitsLoader: (props: AlternatingOrbitsProps) => JSX.Element; 9 | export default AlternatingOrbitsLoader; 10 | -------------------------------------------------------------------------------- /lib/atom/AtomLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface AtomProps { 4 | loading: boolean; 5 | size?: number; 6 | pause?: boolean; 7 | duration?: number; 8 | colors?: string[]; 9 | } 10 | declare const AtomLoader: (props: AtomProps) => JSX.Element; 11 | export default AtomLoader; 12 | -------------------------------------------------------------------------------- /lib/bars/BarsLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface BarsProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | colors?: string[]; 8 | } 9 | declare const BarsLoader: (props: BarsProps) => JSX.Element; 10 | export default BarsLoader; 11 | -------------------------------------------------------------------------------- /lib/bars2/BarsLoader2.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface BarsProps { 4 | loading: boolean; 5 | size?: number; 6 | pause?: boolean; 7 | duration?: number; 8 | color?: string; 9 | } 10 | declare const BarsLoader2: (props: BarsProps) => JSX.Element; 11 | export default BarsLoader2; 12 | -------------------------------------------------------------------------------- /lib/bars2/BarsLoader2.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** @jsx jsx */ 3 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 4 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 5 | return cooked; 6 | }; 7 | var __importDefault = (this && this.__importDefault) || function (mod) { 8 | return (mod && mod.__esModule) ? mod : { "default": mod }; 9 | }; 10 | Object.defineProperty(exports, "__esModule", { value: true }); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var dProps = { 15 | loading: true, 16 | size: 40, 17 | duration: 1.5, 18 | color: utilities_1.Colors.Purple 19 | }; 20 | var BarsLoader2 = function (props) { 21 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, color = props.color; 22 | var numberOfChildren = 5; 23 | var lineChildren = []; 24 | for (var i = 0; i < numberOfChildren; i++) { 25 | lineChildren.push(i); 26 | } 27 | var LineAnim = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n height: ", ";\n transform: translateY(0px); \n }\n 25% {\n height: ", ";\n transform: translateY(", ";); \n }\n 50% {\n height: ", ";\n transform: translateY(0px); \n }\n 100% {\n height: ", ";\n transform: translateY(0px); \n }\n "], ["\n 0% {\n height: ", ";\n transform: translateY(0px); \n }\n 25% {\n height: ", ";\n transform: translateY(", ";); \n }\n 50% {\n height: ", ";\n transform: translateY(0px); \n }\n 100% {\n height: ", ";\n transform: translateY(0px); \n }\n "])), size ? size * 0.125 + "px" : dProps.size * 0.125 + "px", size ? size * 0.5 + "px" : dProps.size * 0.5 + "px", size ? size * 0.25 + "px" : dProps.size * 0.25 + "px", size ? size * 0.125 + "px" : dProps.size * 0.125 + "px", size ? size * 0.125 + "px" : dProps.size * 0.125 + "px"); 28 | var Loader = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n display: ", ";\n "], ["\n position: relative;\n display: ", ";\n "])), loading ? 'flex' : 'none'); 29 | var Bar = styled_1.default('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n background-color: ", ";\n animation: ", " ", " infinite ease-in-out;\n animation-play-state: ", ";\n margin: 1px;\n "], ["\n width: ", ";\n height: ", ";\n background-color: ", ";\n animation: ", " ", " infinite ease-in-out;\n animation-play-state: ", ";\n margin: 1px;\n "])), size ? size * 0.225 + "px" : dProps.size * 0.225 + "px", size ? size * 0.125 + "px" : dProps.size * 0.125 + "px", color ? "" + color : "" + dProps.color, LineAnim, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause)); 30 | var renderBars = function () { 31 | return lineChildren.map(function (child, index) { 32 | var time = index * 0.05; 33 | return (core_1.jsx(Bar, { key: index, css: core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n animation-delay: ", "s;\n "], ["\n animation-delay: ", "s;\n "])), time) })); 34 | }); 35 | }; 36 | return (core_1.jsx(Loader, null, renderBars())); 37 | }; 38 | exports.default = BarsLoader2; 39 | var templateObject_1, templateObject_2, templateObject_3, templateObject_4; 40 | -------------------------------------------------------------------------------- /lib/battery/BatteryLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface BatteryProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | color?: string; 8 | } 9 | declare const BatteryLoader: (props: BatteryProps) => JSX.Element; 10 | export default BatteryLoader; 11 | -------------------------------------------------------------------------------- /lib/battery/BatteryLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 50, 18 | duration: .7, 19 | color: utilities_1.Colors.Purple 20 | }; 21 | var BatteryLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, color = props.color; 23 | var BatteryAnim = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { background-position: 0px 0px; }\n to { background-position: -", "px 0px; }\n "], ["\n from { background-position: 0px 0px; }\n to { background-position: -", "px 0px; }\n "])), dProps.size * 0.4); 24 | var Battery = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: inherit;\n height: ", ";\n border: 1px ", " solid;\n border-radius: 4px;\n position: relative;\n background: linear-gradient(-60deg, transparent 0%, transparent 50%, ", " 50%, ", " 75%, transparent 75%, transparent);\n background-size: ", "px ", "px;\n background-position: 0% 0%;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n "], ["\n width: inherit;\n height: ", ";\n border: 1px ", " solid;\n border-radius: 4px;\n position: relative;\n background: linear-gradient(-60deg, transparent 0%, transparent 50%, ", " 50%, ", " 75%, transparent 75%, transparent);\n background-size: ", "px ", "px;\n background-position: 0% 0%;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n "])), size ? size * 0.36 + "px" : dProps.size * 0.36 + "px", color ? "" + color : "" + dProps.color, color ? "" + color : "" + dProps.color, color ? "" + color : "" + dProps.color, dProps.size * 0.4, dProps.size * 0.6, BatteryAnim, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause)); 25 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 26 | react_1.default.createElement(Battery, null))); 27 | }; 28 | exports.default = BatteryLoader; 29 | var templateObject_1, templateObject_2; 30 | -------------------------------------------------------------------------------- /lib/blob/BlobLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface BlobProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | color?: string; 8 | } 9 | declare const BlobLoader: (props: BlobProps) => JSX.Element; 10 | export default BlobLoader; 11 | -------------------------------------------------------------------------------- /lib/blurrySquare/BlurrySquareLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface BlurrySquareProps { 4 | loading: boolean; 5 | boxNumber?: number; 6 | pause?: boolean; 7 | duration?: number; 8 | colors?: string[]; 9 | } 10 | declare const BlurrySquareLoader: (props: BlurrySquareProps) => JSX.Element; 11 | export default BlurrySquareLoader; 12 | -------------------------------------------------------------------------------- /lib/blurrySquare/BlurrySquareLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** @jsx jsx */ 3 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 4 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 5 | return cooked; 6 | }; 7 | var __importDefault = (this && this.__importDefault) || function (mod) { 8 | return (mod && mod.__esModule) ? mod : { "default": mod }; 9 | }; 10 | Object.defineProperty(exports, "__esModule", { value: true }); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | boxNumber: 3, 18 | duration: 0.7, 19 | colors: [utilities_1.Colors.Purple, utilities_1.Colors.Purple, utilities_1.Colors.Purple, utilities_1.Colors.Purple, utilities_1.Colors.Purple, utilities_1.Colors.Purple] 20 | }; 21 | var BlurrySquareLoader = function (props) { 22 | var loading = props.loading, pause = props.pause, boxNumber = props.boxNumber, duration = props.duration, colors = props.colors; 23 | var numberOfChildren = boxNumber ? boxNumber : dProps.boxNumber; 24 | var drt = 0.7; 25 | var blurChildren = []; 26 | var t = drt / 7; 27 | for (var i = 0; i < numberOfChildren; i++) { 28 | blurChildren.push(i); 29 | } 30 | var Blur = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 50% {\n filter: blur(5px);\n transform: translateY(-10px);\n opacity: 0.3;\n }\n "], ["\n 50% {\n filter: blur(5px);\n transform: translateY(-10px);\n opacity: 0.3;\n }\n "]))); 31 | var Wrapper = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: inherit;\n height: inherit;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n "], ["\n width: inherit;\n height: inherit;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n "]))); 32 | var Child = styled_1.default('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 11px;\n width: 11px;\n margin: 0 5px 0 0;\n opacity: 1;\n border-radius: 10%;\n animation: ", " ", "s infinite;\n animation-play-state: ", ";\n "], ["\n height: 11px;\n width: 11px;\n margin: 0 5px 0 0;\n opacity: 1;\n border-radius: 10%;\n animation: ", " ", "s infinite;\n animation-play-state: ", ";\n "])), Blur, duration ? duration : dProps.duration, pause ? 'paused' : 'running'); 33 | var renderChildren = function () { 34 | return blurChildren.map(function (item, index) { 35 | return (core_1.jsx(Child, { key: index, css: core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n animation-delay: ", ";\n background-color: ", ";\n "], ["\n animation-delay: ", ";\n background-color: ", ";\n "])), t * index + "s", colors ? "" + colors[index] : "" + dProps.colors[index]) })); 36 | }); 37 | }; 38 | return (core_1.jsx(wrapper_1.default, { size: 100, loading: loading, dPropsSize: 100 }, 39 | core_1.jsx(Wrapper, null, renderChildren()))); 40 | }; 41 | exports.default = BlurrySquareLoader; 42 | var templateObject_1, templateObject_2, templateObject_3, templateObject_4; 43 | -------------------------------------------------------------------------------- /lib/bouncyBalls/BouncyBallsLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface BouncyBallsProps { 4 | loading: boolean; 5 | size?: number; 6 | pause?: boolean; 7 | duration?: number; 8 | colors?: string[]; 9 | } 10 | declare const BouncyBallsLoader: (props: BouncyBallsProps) => JSX.Element; 11 | export default BouncyBallsLoader; 12 | -------------------------------------------------------------------------------- /lib/brokenCircles/BrokenCirclesLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface BrokenCirclesProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | colors?: string[]; 7 | } 8 | declare const BrokenCirclesLoader: (props: BrokenCirclesProps) => JSX.Element; 9 | export default BrokenCirclesLoader; 10 | -------------------------------------------------------------------------------- /lib/circleFade/CircleFadeLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface CircleFadeProps { 4 | loading: boolean; 5 | size?: number; 6 | pause?: boolean; 7 | duration?: number; 8 | color?: string; 9 | } 10 | declare const CircleFadeLoader: (props: CircleFadeProps) => JSX.Element; 11 | export default CircleFadeLoader; 12 | -------------------------------------------------------------------------------- /lib/circlePop/CirclePopLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface CirclePopProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | color?: string; 8 | } 9 | declare const CirclePopLoader: (props: CirclePopProps) => JSX.Element; 10 | export default CirclePopLoader; 11 | -------------------------------------------------------------------------------- /lib/clock/ClockLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface ClockProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | colors?: string[]; 8 | } 9 | declare const ClockLoader: (props: ClockProps) => JSX.Element; 10 | export default ClockLoader; 11 | -------------------------------------------------------------------------------- /lib/clock/ClockLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 40, 18 | duration: 1, 19 | colors: [utilities_1.Colors.Purple, utilities_1.Colors.Purple] 20 | }; 21 | var ClockLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, colors = props.colors; 23 | var ClockAnim = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { transform: rotate(0deg); }\n to { transform: rotate(359deg); }\n "], ["\n from { transform: rotate(0deg); }\n to { transform: rotate(359deg); }\n "]))); 24 | var Clock = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: inherit;\n height: inherit;\n border: 1px ", " solid;\n border-radius: 50%;\n position: relative;\n\n &:before {\n content:'';\n border-left: 2px ", " solid;\n position: absolute;\n top: 3px;\n left: 50%;\n height: calc( 50% - 2px );\n transform: rotate(0deg);\n transform-origin: 0% 100%;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n }\n\n "], ["\n width: inherit;\n height: inherit;\n border: 1px ", " solid;\n border-radius: 50%;\n position: relative;\n\n &:before {\n content:'';\n border-left: 2px ", " solid;\n position: absolute;\n top: 3px;\n left: 50%;\n height: calc( 50% - 2px );\n transform: rotate(0deg);\n transform-origin: 0% 100%;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n }\n\n "])), colors ? colors[0] : dProps.colors[0], colors ? colors[1] : dProps.colors[1], ClockAnim, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause)); 25 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 26 | react_1.default.createElement(Clock, null))); 27 | }; 28 | exports.default = ClockLoader; 29 | var templateObject_1, templateObject_2; 30 | -------------------------------------------------------------------------------- /lib/dots/DotsLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface DotsProps { 3 | loading: boolean; 4 | size?: number; 5 | duration?: number; 6 | pause?: boolean; 7 | color?: string; 8 | } 9 | declare const DotsLoader: (props: DotsProps) => JSX.Element; 10 | export default DotsLoader; 11 | -------------------------------------------------------------------------------- /lib/doubleSquare/DoubleSquareLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface DoubleSquareProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | colors?: string[]; 8 | } 9 | declare const DoubleSquareLoader: (props: DoubleSquareProps) => JSX.Element; 10 | export default DoubleSquareLoader; 11 | -------------------------------------------------------------------------------- /lib/doubleSquare/DoubleSquareLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 30, 18 | duration: 2.5, 19 | colors: [utilities_1.Colors.Purple, utilities_1.Colors.Purple] 20 | }; 21 | var DoubleSquareLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, colors = props.colors; 23 | var DoubleSquareAnim = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { \n transform: rotate(0deg); \n }\n to { \n transform: rotate(360deg); \n }\n "], ["\n from { \n transform: rotate(0deg); \n }\n to { \n transform: rotate(360deg); \n }\n "]))); 24 | var DoubleSquare = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n width: inherit;\n height: inherit;\n\n &:before, &:after {\n content: '';\n position: absolute;\n width: ", ";\n height: ", ";\n }\n\n &:after {\n border: ", " solid ", ";\n animation: ", " ", " linear infinite;\n animation-play-state: ", ";\n }\n\n &:before {\n border: ", " solid ", ";\n width: ", ";\n height: ", ";\n margin-left: -", ";\n margin-top: -", ";\n animation: ", " ", " linear infinite;\n animation-play-state: ", ";\n animation-direction: reverse;\n }\n\n "], ["\n position: absolute;\n width: inherit;\n height: inherit;\n\n &:before, &:after {\n content: '';\n position: absolute;\n width: ", ";\n height: ", ";\n }\n\n &:after {\n border: ", " solid ", ";\n animation: ", " ", " linear infinite;\n animation-play-state: ", ";\n }\n\n &:before {\n border: ", " solid ", ";\n width: ", ";\n height: ", ";\n margin-left: -", ";\n margin-top: -", ";\n animation: ", " ", " linear infinite;\n animation-play-state: ", ";\n animation-direction: reverse;\n }\n\n "])), size ? size * 0.88 + "px" : dProps.size * 0.88 + "px", size ? size * 0.88 + "px" : dProps.size * 0.88 + "px", size ? size * 0.07 + "px" : dProps.size * 0.07 + "px", colors ? "" + colors[0] : "" + dProps.colors[0], DoubleSquareAnim, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause), size ? size * 0.07 + "px" : dProps.size * 0.07 + "px", colors ? "" + colors[1] : "" + dProps.colors[1], size ? size * 1.3 + "px" : dProps.size * 1.3 + "px", size ? size * 1.3 + "px" : dProps.size * 1.3 + "px", size ? size * 0.21 + "px" : dProps.size * 0.21 + "px", size ? size * 0.21 + "px" : dProps.size * 0.21 + "px", DoubleSquareAnim, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause)); 25 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 26 | react_1.default.createElement(DoubleSquare, null))); 27 | }; 28 | exports.default = DoubleSquareLoader; 29 | var templateObject_1, templateObject_2; 30 | -------------------------------------------------------------------------------- /lib/drawWave/DrawWaveLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface DrawWaveProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | color?: string; 8 | } 9 | declare const DrawWaveLoader: (props: DrawWaveProps) => JSX.Element; 10 | export default DrawWaveLoader; 11 | -------------------------------------------------------------------------------- /lib/drawWave/DrawWaveLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 50, 18 | duration: .8, 19 | color: utilities_1.Colors.Purple 20 | }; 21 | var DrawWaveLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, color = props.color; 23 | var Slide = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 50% {\n transform: translateY(10px);\n }\n "], ["\n 50% {\n transform: translateY(10px);\n }\n "]))); 24 | var Loader = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n "], ["\n display: flex;\n "]))); 25 | var Wave = styled_1.default('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n height: ", ";;\n border: 2px solid #ffffff;\n background: ", ";\n margin-left: -2px;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n \n &:first-of-type {\n border-top-left-radius: 1000px;\n border-bottom-left-radius: 1000px;\n }\n \n &:last-of-type {\n border-top-right-radius: 1000px;\n border-bottom-right-radius: 1000px;\n }\n \n &:nth-of-type(2n+1) {\n animation-delay: ", "s;\n }\n "], ["\n width: ", ";\n height: ", ";;\n border: 2px solid #ffffff;\n background: ", ";\n margin-left: -2px;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n \n &:first-of-type {\n border-top-left-radius: 1000px;\n border-bottom-left-radius: 1000px;\n }\n \n &:last-of-type {\n border-top-right-radius: 1000px;\n border-bottom-right-radius: 1000px;\n }\n \n &:nth-of-type(2n+1) {\n animation-delay: ", "s;\n }\n "])), size ? size * 0.2 + "px" : dProps.size * 0.2 + "px", size ? size * 0.44 + "px" : dProps.size * 0.44 + "px", color ? "" + color : "" + dProps.color, Slide, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause), duration ? duration / 2 : dProps.duration / 2); 26 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 27 | react_1.default.createElement(Loader, null, 28 | react_1.default.createElement(Wave, null), 29 | react_1.default.createElement(Wave, null), 30 | react_1.default.createElement(Wave, null), 31 | react_1.default.createElement(Wave, null), 32 | react_1.default.createElement(Wave, null)))); 33 | }; 34 | exports.default = DrawWaveLoader; 35 | var templateObject_1, templateObject_2, templateObject_3; 36 | -------------------------------------------------------------------------------- /lib/dyingLight/DyingLightLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface DyingLightProps { 4 | loading: boolean; 5 | pause?: boolean; 6 | size?: number; 7 | colors?: string[]; 8 | } 9 | declare const DyingLightLoader: (props: DyingLightProps) => JSX.Element; 10 | export default DyingLightLoader; 11 | -------------------------------------------------------------------------------- /lib/eightBit/EightBitLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface EightBitProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | color?: string; 8 | } 9 | declare const EightBitLoader: (props: EightBitProps) => JSX.Element; 10 | export default EightBitLoader; 11 | -------------------------------------------------------------------------------- /lib/elasticCircle/ElasticCircleLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface ElasticCircleProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | color?: string; 8 | } 9 | declare const ElasticCircleLoader: (props: ElasticCircleProps) => JSX.Element; 10 | export default ElasticCircleLoader; 11 | -------------------------------------------------------------------------------- /lib/elasticCircle/ElasticCircleLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 40, 18 | duration: 1, 19 | color: utilities_1.Colors.Purple 20 | }; 21 | var ElasticCircleLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, color = props.color; 23 | var ElasticAnim = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n width: ", ";\n height: ", ";\n }\n 25% {\n height: 10%;\n }\n 50% {\n width: 10%;\n }\n 75% {\n width: 85%;\n }\n 100% {\n width: 85%;\n height: 85%;\n }\n "], ["\n 0% {\n width: ", ";\n height: ", ";\n }\n 25% {\n height: 10%;\n }\n 50% {\n width: 10%;\n }\n 75% {\n width: 85%;\n }\n 100% {\n width: 85%;\n height: 85%;\n }\n "])), size ? size + "px" : dProps.size + "px", size ? size + "px" : dProps.size + "px"); 24 | var Loader = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: inherit;\n height: inherit;\n border-radius: 100%;\n border: ", ";\n background-color: transparent;\n animation: ", " ", "s infinite;\n animation-play-state: ", ";\n "], ["\n width: inherit;\n height: inherit;\n border-radius: 100%;\n border: ", ";\n background-color: transparent;\n animation: ", " ", "s infinite;\n animation-play-state: ", ";\n "])), color ? "4px solid " + color : "4px solid " + dProps.color, ElasticAnim, duration ? duration : dProps.duration, pause ? 'paused' : 'running'); 25 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 26 | react_1.default.createElement(Loader, null))); 27 | }; 28 | exports.default = ElasticCircleLoader; 29 | var templateObject_1, templateObject_2; 30 | -------------------------------------------------------------------------------- /lib/fillCircle/FillCircleLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface FillCircleProps { 4 | loading: boolean; 5 | pause?: boolean; 6 | size?: number; 7 | colors?: string[]; 8 | } 9 | declare const FillCircleLoader: (props: FillCircleProps) => JSX.Element; 10 | export default FillCircleLoader; 11 | -------------------------------------------------------------------------------- /lib/fillSquare/FillSquareLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface FillSquareProps { 4 | loading: boolean; 5 | size?: number; 6 | pause?: boolean; 7 | duration?: number; 8 | colors?: string[]; 9 | } 10 | declare const FillSquareLoader: (props: FillSquareProps) => JSX.Element; 11 | export default FillSquareLoader; 12 | -------------------------------------------------------------------------------- /lib/flip/FlipLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface FlipProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | color?: string; 8 | } 9 | declare const FlipLoader: (props: FlipProps) => JSX.Element; 10 | export default FlipLoader; 11 | -------------------------------------------------------------------------------- /lib/flip/FlipLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 45, 18 | duration: 1, 19 | color: utilities_1.Colors.Purple 20 | }; 21 | var FlipLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, color = props.color; 23 | var FlipAnim = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n transform: rotate(0);\n }\n \n 50% {\n transform: rotateY(180deg);\n }\n \n 100% {\n transform: rotateY(180deg) rotateX(180deg);\n }\n "], ["\n 0% {\n transform: rotate(0);\n }\n \n 50% {\n transform: rotateY(180deg);\n }\n \n 100% {\n transform: rotateY(180deg) rotateX(180deg);\n }\n "]))); 24 | var Loader = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n perspective: 120px;\n position: relative;\n width: inherit; \n height: inherit;\n\n &:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: ", "; \n height: ", ";\n background-color: ", ";\n animation: ", " ", " infinite;\n animation-play-state: ", ";\n }\n "], ["\n perspective: 120px;\n position: relative;\n width: inherit; \n height: inherit;\n\n &:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: ", "; \n height: ", ";\n background-color: ", ";\n animation: ", " ", " infinite;\n animation-play-state: ", ";\n }\n "])), size ? size + "px" : dProps.size + "px", size ? size + "px" : dProps.size + "px", utilities_1.loaderColor(color, dProps.color), FlipAnim, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause)); 25 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 26 | react_1.default.createElement(Loader, null))); 27 | }; 28 | exports.default = FlipLoader; 29 | var templateObject_1, templateObject_2; 30 | -------------------------------------------------------------------------------- /lib/flippingCube/FlippingCubeLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface FlippingCubeProps { 4 | loading: boolean; 5 | size?: number; 6 | pause?: boolean; 7 | colors?: string[]; 8 | } 9 | declare const FlippingCubeLoader: (props: FlippingCubeProps) => JSX.Element; 10 | export default FlippingCubeLoader; 11 | -------------------------------------------------------------------------------- /lib/gooey1/GooeyLoader1.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface GooeyLoader1Props { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | color?: string; 7 | } 8 | declare const GooeyLoader1: (props: GooeyLoader1Props) => JSX.Element; 9 | export default GooeyLoader1; 10 | -------------------------------------------------------------------------------- /lib/gooey2/GooeyLoader2.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface GooeyLoader2Props { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | color?: string; 7 | } 8 | declare const GooeyLoader2: (props: GooeyLoader2Props) => JSX.Element; 9 | export default GooeyLoader2; 10 | -------------------------------------------------------------------------------- /lib/gooeyCircle/GooeyCircleLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface GooeyCircleProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | colors?: string[]; 7 | } 8 | declare const GooeyCircleLoader: (props: GooeyCircleProps) => JSX.Element; 9 | export default GooeyCircleLoader; 10 | -------------------------------------------------------------------------------- /lib/helix/HelixLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface HelixLoaderProps { 4 | loading: boolean; 5 | size?: number; 6 | pause?: boolean; 7 | duration?: number; 8 | colors?: string[]; 9 | numberOfDots?: number; 10 | } 11 | declare const HelixLoader: (props: HelixLoaderProps) => JSX.Element; 12 | export default HelixLoader; 13 | -------------------------------------------------------------------------------- /lib/hydrogen/HydrogenLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface HydrogenProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | colors?: string[]; 8 | } 9 | declare const HydrogenLoader: (props: HydrogenProps) => JSX.Element; 10 | export default HydrogenLoader; 11 | -------------------------------------------------------------------------------- /lib/hydrogen/HydrogenLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 45, 18 | duration: 0.6, 19 | colors: [utilities_1.Colors.Purple, utilities_1.Colors.Purple] 20 | }; 21 | var HydrogenLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, colors = props.colors; 23 | var HydrogenAnim = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { transform: rotate(0deg); }\n to { transform: rotate(359deg); }\n "], ["\n from { transform: rotate(0deg); }\n to { transform: rotate(359deg); }\n "]))); 24 | var Hydrogen = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: inherit;\n height: inherit;\n position: relative;\n border: 1px ", " solid;\n border-radius: 50%;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n\n &:before, &:after {\n content: '';\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: ", ";\n border-radius: 50%;\n }\n\n &:before {\n top: calc( 50% - 5px );\n\t left: calc( 50% - 5px );\n }\n\n &:after {\n top: 1px;\n\t left: 1px;\n }\n\n "], ["\n width: inherit;\n height: inherit;\n position: relative;\n border: 1px ", " solid;\n border-radius: 50%;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n\n &:before, &:after {\n content: '';\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: ", ";\n border-radius: 50%;\n }\n\n &:before {\n top: calc( 50% - 5px );\n\t left: calc( 50% - 5px );\n }\n\n &:after {\n top: 1px;\n\t left: 1px;\n }\n\n "])), colors ? "" + colors[0] : "" + dProps.colors[0], HydrogenAnim, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause), colors ? "" + colors[1] : "" + dProps.colors[1]); 25 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 26 | react_1.default.createElement(Hydrogen, null))); 27 | }; 28 | exports.default = HydrogenLoader; 29 | var templateObject_1, templateObject_2; 30 | -------------------------------------------------------------------------------- /lib/hypnosis/HypnosisLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface HypnosisProps { 4 | loading: boolean; 5 | size?: number; 6 | pause?: boolean; 7 | duration?: number; 8 | colors?: string[]; 9 | } 10 | declare const HypnosisLoader: (props: HypnosisProps) => JSX.Element; 11 | export default HypnosisLoader; 12 | -------------------------------------------------------------------------------- /lib/index.d.ts: -------------------------------------------------------------------------------- 1 | import RotatingBoxesLoader from './rotatingBoxes/RotatingBoxesLoader'; 2 | import AlternatingOrbitsLoader from './alternatingOrbits/AlternatingOrbitsLoader'; 3 | import SpinningCircleLoader from './spinningCircle/SpinningCircleLoader'; 4 | import SpinningOrbitLoader from './spinningOrbit/SpinningOrbitLoader'; 5 | import PulseBubbleLoader from './pulseBubble/PulseBubbleLoader'; 6 | import BouncyBallsLoader from './bouncyBalls/BouncyBallsLoader'; 7 | import DyingLightLoader from './dyingLight/DyingLightLoader'; 8 | import CirclePopLoader from './circlePop/CirclePopLoader'; 9 | import GooeyCircleLoader from './gooeyCircle/GooeyCircleLoader'; 10 | import LiquidLoader from './liquid/LiquidLoader'; 11 | import BlurrySquareLoader from './blurrySquare/BlurrySquareLoader'; 12 | import JellyBounceLoader from './jellyBounce/JellyBounceLoader'; 13 | import AtomLoader from './atom/AtomLoader'; 14 | import ElasticCircleLoader from './elasticCircle/ElasticCircleLoader'; 15 | import FlipLoader from './flip/FlipLoader'; 16 | import MovingSquareLoader from './movingSquare/MovingSquareLoader'; 17 | import FlippingCubeLoader from './flippingCube/FlippingCubeLoader'; 18 | import SlidingCubeLoader from './slidingCube/SlidingCubeLoader'; 19 | import SwingingCubeLoader from './swingingCube/SwingingCubeLoader'; 20 | import SwitchingCubeLoader from './switchingCube/SwitchingCubeLoader'; 21 | import LinneardLoader from './linneard/LinneardLoader'; 22 | import FillCircleLoader from './fillCircle/FillCircleLoader'; 23 | import GooeyLoader1 from './gooey1/GooeyLoader1'; 24 | import GooeyLoader2 from './gooey2/GooeyLoader2'; 25 | import HelixLoader from './helix/HelixLoader'; 26 | import VolumeLoader from './volume/VolumeLoader'; 27 | import VortexLoader from './vortex/VortexLoader'; 28 | import SlicesLoader from './slices/SlicesLoader'; 29 | import SphereLoader from './sphere/SphereLoader'; 30 | import BarsLoader from './bars/BarsLoader'; 31 | import ClockLoader from './clock/ClockLoader'; 32 | import WaveLoader from './wave/WaveLoader'; 33 | import TextureLoader from './texture/TextureLoader'; 34 | import BatteryLoader from './battery/BatteryLoader'; 35 | import HydrogenLoader from './hydrogen/HydrogenLoader'; 36 | import FillSquareLoader from './fillSquare/FillSquareLoader'; 37 | import HypnosisLoader from './hypnosis/HypnosisLoader'; 38 | import LineLoader from './line/LineLoader'; 39 | import CircleFadeLoader from './circleFade/CircleFadeLoader'; 40 | import EightBitLoader from './eightBit/EightBitLoader'; 41 | import PingPongLoader from './pingPong/PingPongLoader'; 42 | import KissyBallsLoader from './kissyBalls/KissyBallsLoader'; 43 | import DrawWaveLoader from './drawWave/DrawWaveLoader'; 44 | import BlobLoader from './blob/BlobLoader'; 45 | import BarsLoader2 from './bars2/BarsLoader2'; 46 | import RotatingCircleLoader from './rotatingCircle/RotatingCircleLoader'; 47 | import NotepadLoader from './notepad/NotepadLoader'; 48 | import DoubleSquareLoader from './doubleSquare/DoubleSquareLoader'; 49 | import BrokenCirclesLoader from './brokenCircles/BrokenCirclesLoader'; 50 | import PipLoader from './pip/PipLoader'; 51 | import DotsLoader from './dots/DotsLoader'; 52 | export { RotatingBoxesLoader, AlternatingOrbitsLoader, SpinningCircleLoader, PulseBubbleLoader, SpinningOrbitLoader, BouncyBallsLoader, DyingLightLoader, CirclePopLoader, GooeyCircleLoader, LiquidLoader, BlurrySquareLoader, JellyBounceLoader, AtomLoader, ElasticCircleLoader, FlipLoader, MovingSquareLoader, FlippingCubeLoader, SlidingCubeLoader, SwingingCubeLoader, SwitchingCubeLoader, LinneardLoader, FillCircleLoader, GooeyLoader1, GooeyLoader2, SphereLoader, SlicesLoader, BatteryLoader, HydrogenLoader, HelixLoader, VolumeLoader, VortexLoader, BarsLoader, ClockLoader, WaveLoader, TextureLoader, FillSquareLoader, HypnosisLoader, LineLoader, CircleFadeLoader, EightBitLoader, PingPongLoader, KissyBallsLoader, DrawWaveLoader, BlobLoader, BarsLoader2, RotatingCircleLoader, NotepadLoader, DoubleSquareLoader, BrokenCirclesLoader, PipLoader, DotsLoader }; 53 | -------------------------------------------------------------------------------- /lib/jellyBounce/JellyBounceLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface JellyBounceProps { 4 | loading: boolean; 5 | size?: number; 6 | jellyNumber?: number; 7 | pause?: boolean; 8 | duration?: number; 9 | colors?: string[]; 10 | } 11 | declare const JellyBounceLoader: (props: JellyBounceProps) => JSX.Element; 12 | export default JellyBounceLoader; 13 | -------------------------------------------------------------------------------- /lib/kissyBalls/KissyBallsLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface KissyBallsProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | colors?: string[]; 8 | } 9 | declare const KissyBallsLoader: (props: KissyBallsProps) => JSX.Element; 10 | export default KissyBallsLoader; 11 | -------------------------------------------------------------------------------- /lib/line/LineLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface LineProps { 4 | loading: boolean; 5 | lineWidth?: number; 6 | pause?: boolean; 7 | duration?: number; 8 | color?: string; 9 | } 10 | declare const LineLoader: (props: LineProps) => JSX.Element; 11 | export default LineLoader; 12 | -------------------------------------------------------------------------------- /lib/line/LineLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** @jsx jsx */ 3 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 4 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 5 | return cooked; 6 | }; 7 | var __importDefault = (this && this.__importDefault) || function (mod) { 8 | return (mod && mod.__esModule) ? mod : { "default": mod }; 9 | }; 10 | Object.defineProperty(exports, "__esModule", { value: true }); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var dProps = { 15 | loading: true, 16 | lineWidth: 25, 17 | duration: 2, 18 | color: utilities_1.Colors.Purple 19 | }; 20 | var LineLoader = function (props) { 21 | var loading = props.loading, pause = props.pause, lineWidth = props.lineWidth, duration = props.duration, color = props.color; 22 | var numberOfChildren = lineWidth ? lineWidth : dProps.lineWidth; 23 | var lineChildren = []; 24 | for (var i = 0; i < numberOfChildren; i++) { 25 | lineChildren.push(i); 26 | } 27 | var LineAnim = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% { \n transform: scale(1);\n }\n 50% {\n background-color: ", ";\n opacity: 1;\n transform: scale(3);\n }\n 100% { \n transform: scale(1);\n }\n "], ["\n 0% { \n transform: scale(1);\n }\n 50% {\n background-color: ", ";\n opacity: 1;\n transform: scale(3);\n }\n 100% { \n transform: scale(1);\n }\n "])), color ? "" + color : "" + dProps.color); 28 | var Loader = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 2px;\n display: ", ";\n "], ["\n height: 2px;\n display: ", ";\n "])), loading ? 'flex' : 'none'); 29 | var Line = styled_1.default('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n animation: ", " ease infinite ", ";\n animation-play-state: ", ";\n background-color: ", ";\n border-radius: 0;\n display: inline-block;\n height: 100%;\n opacity: 0;\n transform: scale(1);\n vertical-align: top;\n width: 5px;\n "], ["\n animation: ", " ease infinite ", ";\n animation-play-state: ", ";\n background-color: ", ";\n border-radius: 0;\n display: inline-block;\n height: 100%;\n opacity: 0;\n transform: scale(1);\n vertical-align: top;\n width: 5px;\n "])), utilities_1.loaderDuration(duration, dProps.duration), LineAnim, utilities_1.pauseAnim(pause), color ? "" + color : "" + dProps.color); 30 | var renderLine = function () { 31 | return lineChildren.map(function (child, index) { 32 | var time = index * 0.05; 33 | return (core_1.jsx(Line, { key: index, css: core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n animation-delay: ", "s;\n "], ["\n animation-delay: ", "s;\n "])), time) })); 34 | }); 35 | }; 36 | return (core_1.jsx(Loader, null, renderLine())); 37 | }; 38 | exports.default = LineLoader; 39 | var templateObject_1, templateObject_2, templateObject_3, templateObject_4; 40 | -------------------------------------------------------------------------------- /lib/linneard/LinneardLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface LinneardLoaderProps { 4 | loading: boolean; 5 | size?: number; 6 | pause?: boolean; 7 | duration?: number; 8 | colors?: string[]; 9 | } 10 | declare const LinneardLoader: (props: LinneardLoaderProps) => JSX.Element; 11 | export default LinneardLoader; 12 | -------------------------------------------------------------------------------- /lib/liquid/LiquidLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface LiquidLoaderProps { 3 | loading: boolean; 4 | color?: string; 5 | pause?: boolean; 6 | size?: number | undefined; 7 | duration?: number; 8 | } 9 | declare const LiquidLoader: (props: LiquidLoaderProps) => JSX.Element; 10 | export default LiquidLoader; 11 | -------------------------------------------------------------------------------- /lib/movingSquare/MovingSquareLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface MovingSquareProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | colors?: string[]; 8 | } 9 | declare const MovingSquareLoader: (props: MovingSquareProps) => JSX.Element; 10 | export default MovingSquareLoader; 11 | -------------------------------------------------------------------------------- /lib/movingSquare/MovingSquareLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 60, 18 | duration: 1, 19 | colors: [utilities_1.Colors.Purple, utilities_1.Colors.Purple] 20 | }; 21 | var MovingSquareLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, colors = props.colors; 23 | var SquareMove = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0%, 100%{\n transform: translate(0,0) rotate(0);\n }\n \n 25%{\n transform: translate(30px,30px) rotate(45deg);\n }\n \n 50%{\n transform: translate(0px,60px) rotate(0deg);\n }\n \n 75%{\n transform: translate(-30px,30px) rotate(45deg);\n }\n "], ["\n 0%, 100%{\n transform: translate(0,0) rotate(0);\n }\n \n 25%{\n transform: translate(30px,30px) rotate(45deg);\n }\n \n 50%{\n transform: translate(0px,60px) rotate(0deg);\n }\n \n 75%{\n transform: translate(-30px,30px) rotate(45deg);\n }\n "]))); 24 | var Loader = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transform: ", ";\n transform-origin: center;\n position: relative;\n width: inherit;\n height: inherit;\n\n\n &:before, &:after {\n content: \"\";\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n left: 0;\n animation: ", " ", " ease-in-out infinite;\n animation-play-state: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n\n &:after {\n background-color: ", ";\n animation-delay: ", ";\n }\n "], ["\n transform: ", ";\n transform-origin: center;\n position: relative;\n width: inherit;\n height: inherit;\n\n\n &:before, &:after {\n content: \"\";\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n left: 0;\n animation: ", " ", " ease-in-out infinite;\n animation-play-state: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n\n &:after {\n background-color: ", ";\n animation-delay: ", ";\n }\n "])), size ? "scale(" + size / 100 + ")" : "scale(" + dProps.size / 100 + ")", SquareMove, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause), colors ? "" + colors[0] : "" + dProps.colors[0], colors ? "" + colors[1] : "" + dProps.colors[1], duration ? duration / 2 + "s" : dProps.duration / 2 + "s"); 25 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 26 | react_1.default.createElement(Loader, null))); 27 | }; 28 | exports.default = MovingSquareLoader; 29 | var templateObject_1, templateObject_2; 30 | -------------------------------------------------------------------------------- /lib/notepad/NotepadLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface NotePadProps { 4 | loading: boolean; 5 | size?: number; 6 | pause?: boolean; 7 | duration?: number; 8 | colors?: string[]; 9 | } 10 | declare const NotePadLoader: (props: NotePadProps) => JSX.Element; 11 | export default NotePadLoader; 12 | -------------------------------------------------------------------------------- /lib/pingPong/PingPongLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface PingPongProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | colors?: string[]; 8 | } 9 | declare const PingPongLoader: (props: PingPongProps) => JSX.Element; 10 | export default PingPongLoader; 11 | -------------------------------------------------------------------------------- /lib/pip/PipLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface PipProps { 4 | loading: boolean; 5 | size?: number; 6 | pause?: boolean; 7 | duration?: number; 8 | color?: string; 9 | } 10 | declare const PipLoader: (props: PipProps) => JSX.Element; 11 | export default PipLoader; 12 | -------------------------------------------------------------------------------- /lib/pulseBubble/PulseBubbleLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface PulseBubbleProps { 3 | loading: boolean; 4 | pause?: boolean; 5 | size?: number; 6 | colors?: string[]; 7 | } 8 | declare const PulseBubbleLoader: (props: PulseBubbleProps) => JSX.Element; 9 | export default PulseBubbleLoader; 10 | -------------------------------------------------------------------------------- /lib/rotatingBoxes/RotatingBoxesLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface RotatingBoxesProps { 3 | loading: boolean; 4 | pause?: boolean; 5 | duration?: number; 6 | size?: number; 7 | boxBorderWidth?: number; 8 | colors?: string[]; 9 | } 10 | declare const RotatingBoxesLoader: (props: RotatingBoxesProps) => JSX.Element; 11 | export default RotatingBoxesLoader; 12 | -------------------------------------------------------------------------------- /lib/rotatingCircle/RotatingCircleLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface RotatingCircleProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | colors?: string[]; 8 | } 9 | declare const RotatingCircleLoader: (props: RotatingCircleProps) => JSX.Element; 10 | export default RotatingCircleLoader; 11 | -------------------------------------------------------------------------------- /lib/slices/SlicesLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface SlicesProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | color?: string; 8 | } 9 | declare const SlicesLoader: (props: SlicesProps) => JSX.Element; 10 | export default SlicesLoader; 11 | -------------------------------------------------------------------------------- /lib/slidingCube/SlidingCubeLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface SlidingCubeProps { 3 | loading: boolean; 4 | size?: number; 5 | duration?: number; 6 | pause?: boolean; 7 | colors?: string[]; 8 | } 9 | declare const SlidingCubeLoader: (props: SlidingCubeProps) => JSX.Element; 10 | export default SlidingCubeLoader; 11 | -------------------------------------------------------------------------------- /lib/sphere/SphereLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface SphereProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | color?: string; 8 | } 9 | declare const SphereLoader: (props: SphereProps) => JSX.Element; 10 | export default SphereLoader; 11 | -------------------------------------------------------------------------------- /lib/sphere/SphereLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 40, 18 | duration: 1, 19 | color: utilities_1.Colors.Purple 20 | }; 21 | var SphereLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, color = props.color; 23 | var SphereAnim = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0%, 66% {\n border-left: 0px ", " solid;\n border-right: 0px ", " solid;\n }\n 33% {\n border-left: 32px ", " solid;\n border-right: 0px ", " solid;\n }\n 33.00001% {\n border-left: 0px ", " solid;\n border-right: 32px ", " solid;\n }\n "], ["\n 0%, 66% {\n border-left: 0px ", " solid;\n border-right: 0px ", " solid;\n }\n 33% {\n border-left: 32px ", " solid;\n border-right: 0px ", " solid;\n }\n 33.00001% {\n border-left: 0px ", " solid;\n border-right: 32px ", " solid;\n }\n "])), color ? "" + color : "" + dProps.color, color ? "" + color : "" + dProps.color, color ? "" + color : "" + dProps.color, color ? "" + color : "" + dProps.color, color ? "" + color : "" + dProps.color, color ? "" + color : "" + dProps.color); 24 | var Sphere = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: inherit;\n height: inherit;\n border-radius: 50%;\n border-left: 0px ", " solid;\n border-right: 0px ", " solid;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n "], ["\n width: inherit;\n height: inherit;\n border-radius: 50%;\n border-left: 0px ", " solid;\n border-right: 0px ", " solid;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n "])), color ? "" + color : "" + dProps.color, color ? "" + color : "" + dProps.color, SphereAnim, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause)); 25 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 26 | react_1.default.createElement(Sphere, null))); 27 | }; 28 | exports.default = SphereLoader; 29 | var templateObject_1, templateObject_2; 30 | -------------------------------------------------------------------------------- /lib/spinningCircle/SpinningCircleLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface SpinningCircleLoaderProps { 3 | loading: boolean; 4 | colors?: string[]; 5 | pause?: boolean; 6 | size?: number; 7 | } 8 | declare const SpinningCircleLoader: (props: SpinningCircleLoaderProps) => JSX.Element; 9 | export default SpinningCircleLoader; 10 | -------------------------------------------------------------------------------- /lib/spinningCircle/SpinningCircleLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 50, 18 | colors: [utilities_1.Colors.Purple, '#fafafa'] 19 | }; 20 | var SpinningCircleLoader = function (props) { 21 | var loading = props.loading, pause = props.pause, size = props.size, colors = props.colors; 22 | var rgbDefaultColor = utilities_1.convertToRgba(dProps.colors[0], 10); 23 | var SpinningCircleLoaderAnimation = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from {\n transform: rotate(0);\n }\n to{\n transform: rotate(359deg);\n }\n "], ["\n from {\n transform: rotate(0);\n }\n to{\n transform: rotate(359deg);\n }\n "]))); 24 | var CircleBorder = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: inherit;\n height: inherit;\n padding: 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n background: ", ";\n animation: ", " .8s linear 0s infinite;\n animation-play-state: ", ";\n "], ["\n width: inherit;\n height: inherit;\n padding: 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n background: ", ";\n animation: ", " .8s linear 0s infinite;\n animation-play-state: ", ";\n "])), colors ? "" + colors[0] : "" + dProps.colors[0], colors ? "linear-gradient(0deg, " + utilities_1.convertToRgba(colors[0], 10) + " 33%, " + colors[0] + " 100%)" : "linear-gradient(0deg, " + rgbDefaultColor + " 33%, " + dProps.colors[0] + " 100%)", SpinningCircleLoaderAnimation, pause ? 'paused' : 'running'); 25 | var CircleCore = styled_1.default('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: inherit;\n height: inherit;\n background-color: ", ";\n border-radius: 50%;\n "], ["\n width: inherit;\n height: inherit;\n background-color: ", ";\n border-radius: 50%;\n "])), colors ? "" + colors[1] : "" + dProps.colors[1]); 26 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 27 | react_1.default.createElement(CircleBorder, null, 28 | react_1.default.createElement(CircleCore, null)))); 29 | }; 30 | exports.default = SpinningCircleLoader; 31 | var templateObject_1, templateObject_2, templateObject_3; 32 | -------------------------------------------------------------------------------- /lib/spinningOrbit/SpinningOrbitLoader.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /// 3 | export interface SpinningOrbitProps { 4 | loading: boolean; 5 | pause?: boolean; 6 | size?: number; 7 | colors?: string[]; 8 | } 9 | declare const SpinningOrbitLoader: (props: SpinningOrbitProps) => JSX.Element; 10 | export default SpinningOrbitLoader; 11 | -------------------------------------------------------------------------------- /lib/swingingCube/SwingingCubeLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface SwingingCubeProps { 3 | loading: boolean; 4 | size?: number; 5 | duration?: number; 6 | pause?: boolean; 7 | colors?: string[]; 8 | } 9 | declare const SwingingCubeLoader: (props: SwingingCubeProps) => JSX.Element; 10 | export default SwingingCubeLoader; 11 | -------------------------------------------------------------------------------- /lib/switchingCube/SwitchingCubeLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface SwitchingCubeProps { 3 | loading: boolean; 4 | size?: number; 5 | duration?: number; 6 | pause?: boolean; 7 | colors?: string[]; 8 | } 9 | declare const SwitchingCubeLoader: (props: SwitchingCubeProps) => JSX.Element; 10 | export default SwitchingCubeLoader; 11 | -------------------------------------------------------------------------------- /lib/texture/TextureLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface TextureProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | color?: string; 8 | } 9 | declare const TextureLoader: (props: TextureProps) => JSX.Element; 10 | export default TextureLoader; 11 | -------------------------------------------------------------------------------- /lib/texture/TextureLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 40, 18 | duration: .7, 19 | color: utilities_1.Colors.Purple 20 | }; 21 | var TextureLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, color = props.color; 23 | var TextureAnim = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { background-position: 0px 0px; }\n to { background-position: -16px 0px; }\n "], ["\n from { background-position: 0px 0px; }\n to { background-position: -16px 0px; }\n "]))); 24 | var Texture = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: inherit;\n height: inherit;\n border: 1px ", " solid;\n border-radius: 4px;\n position: relative;\n background: linear-gradient(45deg, transparent 49%, ", " 50%, ", " 50%, transparent 51%, transparent),\n linear-gradient(-45deg, transparent 49%, ", " 50%, ", " 50%, transparent 51%, transparent);\n background-size: 16px 16px;\n background-position: 0% 0%;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n "], ["\n width: inherit;\n height: inherit;\n border: 1px ", " solid;\n border-radius: 4px;\n position: relative;\n background: linear-gradient(45deg, transparent 49%, ", " 50%, ", " 50%, transparent 51%, transparent),\n linear-gradient(-45deg, transparent 49%, ", " 50%, ", " 50%, transparent 51%, transparent);\n background-size: 16px 16px;\n background-position: 0% 0%;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n "])), color ? "" + color : "" + dProps.color, color ? "" + color : "" + dProps.color, color ? "" + color : "" + dProps.color, color ? "" + color : "" + dProps.color, color ? "" + color : "" + dProps.color, TextureAnim, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause)); 25 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 26 | react_1.default.createElement(Texture, null))); 27 | }; 28 | exports.default = TextureLoader; 29 | var templateObject_1, templateObject_2; 30 | -------------------------------------------------------------------------------- /lib/utilities/utilities.d.ts: -------------------------------------------------------------------------------- 1 | export declare enum Colors { 2 | Purple = "#5e22f0", 3 | Yellow = "#f6b93b", 4 | Pink = "#ef5777" 5 | } 6 | export declare const convertToRgba: (colorString: string, colorOpacity: number) => string; 7 | export declare const loaderDuration: (customDuration: number | undefined, defaultDuration: number) => string; 8 | export declare const loaderColor: (customColor: string | undefined, defaultColor: string) => string; 9 | export declare const pauseAnim: (pauseState: boolean | undefined) => string; 10 | export declare const lightenDarkenColor: (col: string, amt: number) => string; 11 | -------------------------------------------------------------------------------- /lib/utilities/utilities.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var Colors; 4 | (function (Colors) { 5 | Colors["Purple"] = "#5e22f0"; 6 | Colors["Yellow"] = "#f6b93b"; 7 | Colors["Pink"] = "#ef5777"; 8 | })(Colors = exports.Colors || (exports.Colors = {})); 9 | exports.convertToRgba = function (colorString, colorOpacity) { 10 | colorString = colorString.replace('#', ''); 11 | var r = parseInt(colorString.substring(0, 2), 16); 12 | var g = parseInt(colorString.substring(2, 4), 16); 13 | var b = parseInt(colorString.substring(4, 6), 16); 14 | var result = 'rgba(' + r + ',' + g + ',' + b + ',' + colorOpacity / 100 + ')'; 15 | return result; 16 | }; 17 | exports.loaderDuration = function (customDuration, defaultDuration) { 18 | return (customDuration ? customDuration : defaultDuration) + "s"; 19 | }; 20 | exports.loaderColor = function (customColor, defaultColor) { 21 | return "" + (customColor ? customColor : defaultColor); 22 | }; 23 | exports.pauseAnim = function (pauseState) { 24 | return "" + (pauseState ? 'paused' : 'running'); 25 | }; 26 | exports.lightenDarkenColor = function (col, amt) { 27 | var usePound = false; 28 | if (col[0] === "#") { 29 | col = col.slice(1); 30 | usePound = true; 31 | } 32 | var num = parseInt(col, 16); 33 | var r = (num >> 16) + amt; 34 | if (r > 255) 35 | r = 255; 36 | else if (r < 0) 37 | r = 0; 38 | var b = ((num >> 8) & 0x00FF) + amt; 39 | if (b > 255) 40 | b = 255; 41 | else if (b < 0) 42 | b = 0; 43 | var g = (num & 0x0000FF) + amt; 44 | if (g > 255) 45 | g = 255; 46 | else if (g < 0) 47 | g = 0; 48 | return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16); 49 | }; 50 | -------------------------------------------------------------------------------- /lib/volume/VolumeLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface VolumeProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | colors?: string[]; 8 | } 9 | declare const VolumeLoader: (props: VolumeProps) => JSX.Element; 10 | export default VolumeLoader; 11 | -------------------------------------------------------------------------------- /lib/volume/VolumeLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 35, 18 | duration: .6, 19 | colors: [utilities_1.Colors.Purple, '#ffffff'] 20 | }; 21 | var VolumeLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, colors = props.colors; 23 | var VolumeAnim = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { \n transform: rotate(0deg); \n }\n to { \n transform: rotate(359deg); \n }\n "], ["\n from { \n transform: rotate(0deg); \n }\n to { \n transform: rotate(359deg); \n }\n "]))); 24 | var Volume = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: inherit;\n height: inherit;\n background-color: ", ";\n border-radius: 100px;\n position: relative;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n\n &:after {\n margin: 1px;\n content: '';\n border-radius: 100px;\n position: absolute;\n display: block;\n width: 10px;\n height: 10px;\n left: 5px;\n top: 5px;\n background-color: ", ";\n }\n\n "], ["\n width: inherit;\n height: inherit;\n background-color: ", ";\n border-radius: 100px;\n position: relative;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n\n &:after {\n margin: 1px;\n content: '';\n border-radius: 100px;\n position: absolute;\n display: block;\n width: 10px;\n height: 10px;\n left: 5px;\n top: 5px;\n background-color: ", ";\n }\n\n "])), colors ? "" + colors[0] : "" + dProps.colors[0], VolumeAnim, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause), colors ? "" + colors[1] : "" + dProps.colors[1]); 25 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 26 | react_1.default.createElement(Volume, null))); 27 | }; 28 | exports.default = VolumeLoader; 29 | var templateObject_1, templateObject_2; 30 | -------------------------------------------------------------------------------- /lib/vortex/VortexLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface VortexProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | colors?: string[]; 8 | } 9 | declare const VortexLoader: (props: VortexProps) => JSX.Element; 10 | export default VortexLoader; 11 | -------------------------------------------------------------------------------- /lib/vortex/VortexLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 40, 18 | duration: 2, 19 | colors: [utilities_1.Colors.Purple, utilities_1.Colors.Purple] 20 | }; 21 | var VortexLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, colors = props.colors; 23 | var VortexAnim = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { \n transform: rotate(0deg); \n }\n to { \n transform: rotate(359deg); \n }\n "], ["\n from { \n transform: rotate(0deg); \n }\n to { \n transform: rotate(359deg); \n }\n "]))); 24 | var Vortex = styled_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: inherit;\n height: inherit;\n border: 1px ", " solid;\n border-radius: 4px;\n overflow: hidden;\n position: relative;\n\n &:before, &:after {\n content: '';\n border-radius: 50%;\n position: absolute;\n width: inherit;\n height: inherit;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n }\n\n &:before {\n border-top: 15px ", " solid;\n top: -3px;\n left: calc( -51% - 3px );\n transform-origin: right center;\n }\n\n &:after {\n border-bottom: 15px ", " solid;\n top: 3px;\n right: calc( -50% - 3px );\n transform-origin: left center;\n }\n\n "], ["\n width: inherit;\n height: inherit;\n border: 1px ", " solid;\n border-radius: 4px;\n overflow: hidden;\n position: relative;\n\n &:before, &:after {\n content: '';\n border-radius: 50%;\n position: absolute;\n width: inherit;\n height: inherit;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n }\n\n &:before {\n border-top: 15px ", " solid;\n top: -3px;\n left: calc( -51% - 3px );\n transform-origin: right center;\n }\n\n &:after {\n border-bottom: 15px ", " solid;\n top: 3px;\n right: calc( -50% - 3px );\n transform-origin: left center;\n }\n\n "])), colors ? "" + colors[0] : "" + dProps.colors[0], VortexAnim, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause), colors ? "" + colors[1] : "" + dProps.colors[1], colors ? "" + colors[1] : "" + dProps.colors[1]); 25 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 26 | react_1.default.createElement(Vortex, null))); 27 | }; 28 | exports.default = VortexLoader; 29 | var templateObject_1, templateObject_2; 30 | -------------------------------------------------------------------------------- /lib/wave/WaveLoader.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export interface WaveProps { 3 | loading: boolean; 4 | size?: number; 5 | pause?: boolean; 6 | duration?: number; 7 | color?: string; 8 | } 9 | declare const WaveLoader: (props: WaveProps) => JSX.Element; 10 | export default WaveLoader; 11 | -------------------------------------------------------------------------------- /lib/wave/WaveLoader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var core_1 = require("@emotion/core"); 13 | var utilities_1 = require("../utilities/utilities"); 14 | var wrapper_1 = __importDefault(require("../wrapper/wrapper")); 15 | var dProps = { 16 | loading: true, 17 | size: 40, 18 | duration: 0.6, 19 | color: utilities_1.Colors.Purple 20 | }; 21 | var WaveLoader = function (props) { 22 | var loading = props.loading, size = props.size, pause = props.pause, duration = props.duration, color = props.color; 23 | var WaveAf = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { transform: scale(0.5,0.5); opacity: 0; }\n to { transform: scale(1,1); opacity: 1; }\n "], ["\n from { transform: scale(0.5,0.5); opacity: 0; }\n to { transform: scale(1,1); opacity: 1; }\n "]))); 24 | var WaveBf = core_1.keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n from { transform: scale(1,1); opacity: 1; }\n to { transform: scale(1.5,1.5); opacity: 0; }\n "], ["\n from { transform: scale(1,1); opacity: 1; }\n to { transform: scale(1.5,1.5); opacity: 0; }\n "]))); 25 | var Wave = styled_1.default('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: inherit;\n height: inherit;\n border-radius: 50%;\n position: relative;\n opacity: 1;\n\n &:before, &:after {\n content:'';\n border: 1px ", " solid;\n border-radius: 50%;\n width: 100%;\n height: 100%;\n position: absolute;\n left:0px;\n }\n\n &:before {\n transform: scale(1,1);\n opacity: 1;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n }\n\n &:after {\n transform: scale(0,0);\n opacity: 0;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n }\n\n "], ["\n width: inherit;\n height: inherit;\n border-radius: 50%;\n position: relative;\n opacity: 1;\n\n &:before, &:after {\n content:'';\n border: 1px ", " solid;\n border-radius: 50%;\n width: 100%;\n height: 100%;\n position: absolute;\n left:0px;\n }\n\n &:before {\n transform: scale(1,1);\n opacity: 1;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n }\n\n &:after {\n transform: scale(0,0);\n opacity: 0;\n animation: ", " ", " infinite linear;\n animation-play-state: ", ";\n }\n\n "])), color ? color : dProps.color, WaveBf, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause), WaveAf, utilities_1.loaderDuration(duration, dProps.duration), utilities_1.pauseAnim(pause)); 26 | return (react_1.default.createElement(wrapper_1.default, { size: size, loading: loading, dPropsSize: dProps.size }, 27 | react_1.default.createElement(Wave, null))); 28 | }; 29 | exports.default = WaveLoader; 30 | var templateObject_1, templateObject_2, templateObject_3; 31 | -------------------------------------------------------------------------------- /lib/wrapper/wrapper.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | export interface WrapperProps { 3 | size: number | undefined; 4 | loading: boolean | undefined; 5 | dPropsSize: number; 6 | children: ReactNode; 7 | } 8 | declare const LoaderBox: (props: WrapperProps) => JSX.Element; 9 | export default LoaderBox; 10 | -------------------------------------------------------------------------------- /lib/wrapper/wrapper.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; 5 | }; 6 | var __importDefault = (this && this.__importDefault) || function (mod) { 7 | return (mod && mod.__esModule) ? mod : { "default": mod }; 8 | }; 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | var react_1 = __importDefault(require("react")); 11 | var styled_1 = __importDefault(require("@emotion/styled")); 12 | var LoaderBox = function (props) { 13 | var LoaderBox = styled_1.default('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", "; \n height: ", ";\n display: ", ";\n justify-content: center;\n align-items: center;\n background-color: transparent;\n position: relative;\n "], ["\n width: ", "; \n height: ", ";\n display: ", ";\n justify-content: center;\n align-items: center;\n background-color: transparent;\n position: relative;\n "])), props.size ? props.size + "px" : props.dPropsSize + "px", props.size ? props.size + "px" : props.dPropsSize + "px", props.loading ? 'flex' : 'none'); 14 | return (react_1.default.createElement(LoaderBox, null, props.children)); 15 | }; 16 | exports.default = LoaderBox; 17 | var templateObject_1; 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-loaders-kit", 3 | "version": "0.1.3", 4 | "description": "A robust collection of loaders for React.js", 5 | "homepage": "https://github.com/Seimodei/react-loaders-kit", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/Seimodei/react-loaders-kit.git" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/Seimodei/react-loaders-kit/issues" 12 | }, 13 | "author": "Bratua Seimodei", 14 | "license": "MIT", 15 | "main": "lib/index.js", 16 | "types": "lib/index.d.ts", 17 | "files": [ 18 | "lib/**/*" 19 | ], 20 | "dependencies": { 21 | "@emotion/core": "^10.0.27", 22 | "@emotion/styled": "^10.0.27", 23 | "@testing-library/jest-dom": "^4.2.4", 24 | "@testing-library/react": "^9.4.0", 25 | "@testing-library/user-event": "^7.2.1", 26 | "@types/enzyme": "^3.10.5", 27 | "@types/enzyme-adapter-react-16": "^1.0.6", 28 | "@types/jest": "^24.9.1", 29 | "@types/node": "^12.12.27", 30 | "@types/react": "^16.9.19", 31 | "@types/react-dom": "^16.9.5", 32 | "jest": "^25.1.0", 33 | "jest-enzyme": "^7.1.2", 34 | "react": "^16.12.0", 35 | "react-dom": "^16.12.0", 36 | "react-scripts": "3.4.0", 37 | "ts-jest": "^25.2.0", 38 | "typescript": "^3.7.5" 39 | }, 40 | "scripts": { 41 | "start": "react-scripts start", 42 | "build": "tsc", 43 | "test": "jest --config jestconfig.json", 44 | "eject": "react-scripts eject" 45 | }, 46 | "eslintConfig": { 47 | "extends": "react-app" 48 | }, 49 | "browserslist": { 50 | "production": [ 51 | ">0.2%", 52 | "not dead", 53 | "not op_mini all" 54 | ], 55 | "development": [ 56 | "last 1 chrome version", 57 | "last 1 firefox version", 58 | "last 1 safari version" 59 | ] 60 | }, 61 | "keywords": [ 62 | "react", 63 | "react-components", 64 | "loaders", 65 | "spinners", 66 | "loader", 67 | "spinner", 68 | "react-loaders", 69 | "react-loader", 70 | "react-spinners", 71 | "react-spinner", 72 | "react-css-spinners", 73 | "react-css-loaders-kit", 74 | "react-pure-css-spinners", 75 | "react-pure-css-loaders", 76 | "react-loaders-kit", 77 | "progress", 78 | "progress-indicator", 79 | "activity", 80 | "activity-loader", 81 | "loading", 82 | "loading-indicators", 83 | "react-loading-indicators", 84 | "react-loading-animations", 85 | "react-css-loading-animations", 86 | "progress-bar" 87 | ], 88 | "devDependencies": { 89 | "enzyme": "^3.11.0", 90 | "enzyme-adapter-react-16": "^1.15.2" 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/alternatingOrbits/AlternatingOrbitsLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, convertToRgba } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface AlternatingOrbitsProps { 12 | loading: boolean; 13 | pause?: boolean; 14 | size?: number; 15 | colors?: string[]; 16 | } 17 | 18 | const dProps = { 19 | loading: true, 20 | size: 50, 21 | colors: [Colors.Purple, Colors.Yellow] 22 | } 23 | 24 | 25 | const AlternatingOrbitsLoader = (props: AlternatingOrbitsProps) => { 26 | 27 | const { 28 | loading, 29 | pause, 30 | size, 31 | colors 32 | } = props; 33 | 34 | const rgbDefaultColor1 = convertToRgba(dProps.colors[0], 10); 35 | const rgbDefaultColor2 = convertToRgba(dProps.colors[1], 10); 36 | 37 | const AlternatingOrbitsAnimation = keyframes` 38 | from { 39 | transform: rotate3d(.5,.5,.5, 360deg); 40 | } 41 | to{ 42 | transform: rotate3d(0deg); 43 | } 44 | `; 45 | 46 | const Orbit1 = styled('div')` 47 | position: absolute; 48 | width: inherit; 49 | height: inherit; 50 | padding: 3px; 51 | display: flex; 52 | justify-content: center; 53 | align-items: center; 54 | border-radius: 50%; 55 | background: ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 56 | background: ${colors ? `linear-gradient(0deg, ${convertToRgba(colors[0], 50)} 33%, ${colors[0]} 100%)` : `linear-gradient(0deg, ${rgbDefaultColor1} 33%, ${dProps.colors[0]} 100%)`}; 57 | animation: ${AlternatingOrbitsAnimation} 1.8s linear 0s infinite; 58 | animation-play-state: ${pause ? 'paused' : 'running'}; 59 | `; 60 | 61 | const Orbit2 = styled('div')` 62 | position: absolute; 63 | width: inherit; 64 | height: inherit; 65 | padding: 3px; 66 | display: flex; 67 | justify-content: center; 68 | align-items: center; 69 | border-radius: 50%; 70 | background: ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 71 | background: ${colors ? `linear-gradient(0deg, ${convertToRgba(colors[1], 50)} 33%, ${colors[1]} 100%)` : `linear-gradient(0deg, ${rgbDefaultColor2} 33%, ${dProps.colors[1]} 100%)`}; 72 | animation: ${AlternatingOrbitsAnimation} 2.2s linear 0s infinite; 73 | animation-play-state: ${pause ? 'paused' : 'running'}; 74 | `; 75 | 76 | const Core1 = styled('div')` 77 | width: 100%; 78 | height: 100%; 79 | background-color: ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 80 | opacity: 0.5; 81 | border-radius: 50%; 82 | `; 83 | 84 | const Core2 = styled('div')` 85 | width: 100%; 86 | height: 100%; 87 | background-color: ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 88 | opacity: 0.6; 89 | border-radius: 50%; 90 | `; 91 | 92 | return ( 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | ) 102 | } 103 | 104 | export default AlternatingOrbitsLoader; -------------------------------------------------------------------------------- /src/bars/BarsLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration, convertToRgba } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface BarsProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | colors?: string[]; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 35, 22 | duration: 1, 23 | colors: [Colors.Purple, Colors.Yellow] 24 | } 25 | 26 | 27 | const BarsLoader = (props: BarsProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | colors, 35 | } = props; 36 | 37 | const BarsAnim = keyframes` 38 | 0% { 39 | transform: scale(1,1); 40 | } 41 | 25% { 42 | transform: scale(1,1); 43 | } 44 | 50% { 45 | transform: scale(1,1.25); 46 | } 47 | 75% { 48 | transform: scale(1,1); 49 | } 50 | 100% { 51 | transform: scale(1,1); 52 | } 53 | `; 54 | 55 | const BarsBeforeAnim = keyframes` 56 | 0% { 57 | transform: scale(1,1); 58 | } 59 | 25% { 60 | transform: scale(1,1.25); 61 | } 62 | 50% { 63 | transform: scale(1,0.75); 64 | } 65 | 75% { 66 | transform: scale(1,1); 67 | } 68 | 100% { 69 | transform: scale(1,1); 70 | } 71 | `; 72 | 73 | const BarsAfterAnim = keyframes` 74 | 0% { 75 | transform: scale(1,1); 76 | } 77 | 25% { 78 | transform: scale(1,1); 79 | } 80 | 50% { 81 | transform: scale(1,0.75); 82 | } 83 | 75% { 84 | transform: scale(1,1.25); 85 | } 86 | 100% { 87 | transform: scale(1,1); 88 | } 89 | `; 90 | 91 | const Bars = styled('div')` 92 | width: ${size ? `${size*0.25}px` : `${dProps.size*0.25}px`}; 93 | height: inherit; 94 | position: relative; 95 | border: 1px ${colors ? `${colors[0]}` : `${dProps.colors[0]}`} solid; 96 | background-color: ${colors ? convertToRgba(colors[1], 25) : convertToRgba(dProps.colors[1], 25)}; 97 | animation: ${BarsAnim} ${loaderDuration(duration, dProps.duration)} infinite linear; 98 | animation-play-state: ${pauseAnim(pause)}; 99 | 100 | &:before, &:after { 101 | content:''; 102 | position: absolute; 103 | width: inherit; 104 | height: inherit; 105 | border: inherit; 106 | background-color: inherit; 107 | top: -1px; 108 | } 109 | 110 | &:before { 111 | left: ${size ? `${size/2}px` : `${dProps.size/2}px`}; 112 | animation: ${BarsBeforeAnim} ${loaderDuration(duration, dProps.duration)} infinite linear; 113 | animation-play-state: ${pauseAnim(pause)}; 114 | } 115 | 116 | &:after { 117 | right: ${size ? `${size/2}px` : `${dProps.size/2}px`}; 118 | animation: ${BarsAfterAnim} ${loaderDuration(duration, dProps.duration)} infinite linear; 119 | animation-play-state: ${pauseAnim(pause)}; 120 | } 121 | 122 | `; 123 | 124 | return ( 125 | 126 | 127 | 128 | ) 129 | } 130 | 131 | export default BarsLoader; -------------------------------------------------------------------------------- /src/bars2/BarsLoader2.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx } from '@emotion/core'; 7 | 8 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 9 | 10 | 11 | 12 | export interface BarsProps { 13 | loading: boolean; 14 | size?: number; 15 | pause?: boolean; 16 | duration?: number; 17 | color?: string; 18 | } 19 | 20 | const dProps = { 21 | loading: true, 22 | size: 40, 23 | duration: 1.5, 24 | color: Colors.Purple 25 | } 26 | 27 | const BarsLoader2 = (props: BarsProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | color, 35 | } = props; 36 | 37 | const numberOfChildren = 5; 38 | const lineChildren: number[] = []; 39 | 40 | for(let i = 0; i < numberOfChildren; i++) { 41 | lineChildren.push(i); 42 | } 43 | 44 | const LineAnim = keyframes` 45 | 0% { 46 | height: ${size ? `${size*0.125}px` : `${dProps.size*0.125}px`}; 47 | transform: translateY(0px); 48 | } 49 | 25% { 50 | height: ${size ? `${size*0.5}px` : `${dProps.size*0.5}px`}; 51 | transform: translateY(${size ? `${size*0.25}px` : `${dProps.size*0.25}px`};); 52 | } 53 | 50% { 54 | height: ${size ? `${size*0.125}px` : `${dProps.size*0.125}px`}; 55 | transform: translateY(0px); 56 | } 57 | 100% { 58 | height: ${size ? `${size*0.125}px` : `${dProps.size*0.125}px`}; 59 | transform: translateY(0px); 60 | } 61 | `; 62 | 63 | const Loader = styled('div')` 64 | position: relative; 65 | display: ${loading ? 'flex' : 'none'}; 66 | `; 67 | 68 | const Bar = styled('div')` 69 | width: ${size ? `${size*0.225}px` : `${dProps.size*0.225}px`}; 70 | height: ${size ? `${size*0.125}px` : `${dProps.size*0.125}px`}; 71 | background-color: ${color ? `${color}` : `${dProps.color}`}; 72 | animation: ${LineAnim} ${loaderDuration(duration, dProps.duration)} infinite ease-in-out; 73 | animation-play-state: ${pauseAnim(pause)}; 74 | margin: 1px; 75 | `; 76 | 77 | const renderBars = () => { 78 | return lineChildren.map((child, index) => { 79 | let time = index * 0.05; 80 | return ( 81 | 87 | ) 88 | }) 89 | } 90 | 91 | return ( 92 | 93 | {renderBars()} 94 | 95 | ) 96 | } 97 | 98 | 99 | 100 | export default BarsLoader2; -------------------------------------------------------------------------------- /src/battery/BatteryLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface BatteryProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | color?: string; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 50, 22 | duration: .7, 23 | color: Colors.Purple 24 | } 25 | 26 | 27 | const BatteryLoader = (props: BatteryProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | color, 35 | } = props; 36 | 37 | const BatteryAnim = keyframes` 38 | from { background-position: 0px 0px; } 39 | to { background-position: -${dProps.size*0.4}px 0px; } 40 | `; 41 | 42 | const Battery = styled('div')` 43 | width: inherit; 44 | height: ${size ? `${size*0.36}px` : `${dProps.size*0.36}px`}; 45 | border: 1px ${color ? `${color}` : `${dProps.color}`} solid; 46 | border-radius: 4px; 47 | position: relative; 48 | background: linear-gradient(-60deg, transparent 0%, transparent 50%, ${color ? `${color}` : `${dProps.color}`} 50%, ${color ? `${color}` : `${dProps.color}`} 75%, transparent 75%, transparent); 49 | background-size: ${dProps.size*0.4}px ${dProps.size*0.6}px; 50 | background-position: 0% 0%; 51 | animation: ${BatteryAnim} ${loaderDuration(duration, dProps.duration)} infinite linear; 52 | animation-play-state: ${pauseAnim(pause)}; 53 | `; 54 | 55 | return ( 56 | 57 | 58 | 59 | ) 60 | } 61 | 62 | export default BatteryLoader; -------------------------------------------------------------------------------- /src/blob/BlobLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration, loaderColor } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface BlobProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | color?: string; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 40, 22 | duration: 1.3, 23 | color: Colors.Purple 24 | } 25 | 26 | 27 | const BlobLoader = (props: BlobProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | color, 35 | } = props; 36 | 37 | const BlobBottom = keyframes` 38 | 5%, 50%, 75% { 39 | top: 50%; 40 | left: 100%; 41 | } 42 | 100% { 43 | top: 0; 44 | left: 50%; 45 | } 46 | `; 47 | 48 | const BlobLeft = keyframes` 49 | 25% { 50 | top: 50%; 51 | left: 0; 52 | } 53 | 50%, 100% { 54 | top: 100%; 55 | left: 50%; 56 | } 57 | `; 58 | 59 | const BlobTop = keyframes` 60 | 50% { 61 | top: 0; 62 | left: 50%; 63 | } 64 | 75%, 100% { 65 | top: 50%; 66 | left: 0; 67 | } 68 | `; 69 | 70 | const BlobMover = keyframes` 71 | 0%, 100% { 72 | top: 0; 73 | left: 50%; 74 | } 75 | 25% { 76 | top: 50%; 77 | left: 100%; 78 | } 79 | 50% { 80 | top: 100%; 81 | left: 50%; 82 | } 83 | 75% { 84 | top: 50%; 85 | left: 0; 86 | } 87 | `; 88 | 89 | const Loader = styled('div')` 90 | position: absolute; 91 | width: inherit; 92 | height: inherit; 93 | top: 50%; 94 | left: 50%; 95 | transform: translate(-50%, -50%); 96 | `; 97 | 98 | const Blob = styled('div')` 99 | position: absolute; 100 | top: 50%; 101 | left: 50%; 102 | transform: translate(-50%, -50%); 103 | border: 2px solid ${loaderColor(color, dProps.color)}; 104 | width: ${size ? size*0.33 : dProps.size*0.33}px; 105 | height: ${size ? size*0.33 : dProps.size*0.33}px; 106 | border-radius: 50%; 107 | 108 | &:nth-of-type(1) { 109 | top: 0; 110 | animation: ${BlobTop} ${loaderDuration(duration, dProps.duration)} infinite ease-in; 111 | animation-play-state: ${pauseAnim(pause)}; 112 | } 113 | 114 | &:nth-of-type(2) { 115 | top: 100%; 116 | animation: ${BlobBottom} ${loaderDuration(duration, dProps.duration)} infinite ease-in; 117 | animation-play-state: ${pauseAnim(pause)}; 118 | } 119 | 120 | &:nth-of-type(3) { 121 | left: 0; 122 | animation: ${BlobLeft} ${loaderDuration(duration, dProps.duration)} infinite ease-in; 123 | animation-play-state: ${pauseAnim(pause)}; 124 | } 125 | 126 | &:nth-of-type(4) { 127 | background: ${loaderColor(color, dProps.color)}; 128 | top: 0; 129 | animation: ${BlobMover} ${loaderDuration(duration, dProps.duration)} infinite ease-in; 130 | animation-play-state: ${pauseAnim(pause)}; 131 | } 132 | `; 133 | 134 | return ( 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | ) 144 | } 145 | 146 | export default BlobLoader; -------------------------------------------------------------------------------- /src/blurrySquare/BlurrySquareLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx} from '@emotion/core'; 7 | 8 | import { Colors } from '../utilities/utilities'; 9 | import LoaderBox from '../wrapper/wrapper'; 10 | 11 | 12 | export interface BlurrySquareProps { 13 | loading: boolean; 14 | boxNumber?: number; 15 | pause?: boolean; 16 | duration?: number; 17 | colors?: string[]; 18 | } 19 | 20 | 21 | const dProps = { 22 | loading: true, 23 | boxNumber: 3, 24 | duration: 0.7, 25 | colors: [ Colors.Purple, Colors.Purple, Colors.Purple, Colors.Purple, Colors.Purple, Colors.Purple ] 26 | } 27 | 28 | 29 | const BlurrySquareLoader = (props: BlurrySquareProps) => { 30 | 31 | const { 32 | loading, 33 | pause, 34 | boxNumber, 35 | duration, 36 | colors, 37 | } = props; 38 | 39 | const numberOfChildren = boxNumber ? boxNumber : dProps.boxNumber; 40 | const drt = 0.7; 41 | 42 | const blurChildren: number[] = []; 43 | const t = drt/7; 44 | 45 | for(let i = 0; i < numberOfChildren; i++) { 46 | blurChildren.push(i); 47 | } 48 | 49 | const Blur = keyframes` 50 | 50% { 51 | filter: blur(5px); 52 | transform: translateY(-10px); 53 | opacity: 0.3; 54 | } 55 | `; 56 | 57 | const Wrapper = styled('div')` 58 | width: inherit; 59 | height: inherit; 60 | position: relative; 61 | display: flex; 62 | justify-content: center; 63 | align-items: center; 64 | `; 65 | 66 | const Child = styled('div')` 67 | height: 11px; 68 | width: 11px; 69 | margin: 0 5px 0 0; 70 | opacity: 1; 71 | border-radius: 10%; 72 | animation: ${Blur} ${duration ? duration : dProps.duration}s infinite; 73 | animation-play-state: ${pause ? 'paused' : 'running'}; 74 | `; 75 | 76 | 77 | 78 | const renderChildren = () => { 79 | return blurChildren.map((item, index) => { 80 | return ( 81 | 88 | ) 89 | }) 90 | }; 91 | 92 | return ( 93 | 94 | 95 | {renderChildren()} 96 | 97 | 98 | ) 99 | } 100 | 101 | 102 | export default BlurrySquareLoader; -------------------------------------------------------------------------------- /src/bouncyBalls/BouncyBallsLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx } from '@emotion/core'; 7 | 8 | import { Colors } from '../utilities/utilities'; 9 | import LoaderBox from '../wrapper/wrapper'; 10 | 11 | 12 | export interface BouncyBallsProps { 13 | loading: boolean; 14 | size?: number; 15 | pause?: boolean; 16 | duration?: number; 17 | colors?: string[]; 18 | } 19 | 20 | 21 | const dProps = { 22 | loading: true, 23 | size: 40, 24 | duration: 0.4, 25 | colors: [ Colors.Purple, Colors.Purple, Colors.Purple ] 26 | } 27 | 28 | 29 | const BouncyBallsLoader = (props: BouncyBallsProps) => { 30 | 31 | const { 32 | loading, 33 | size, 34 | pause, 35 | duration, 36 | colors, 37 | } = props; 38 | 39 | const bubbleConfig = (loaderSize: number) => { 40 | if (loaderSize <= 80 && loaderSize >= 60) { 41 | return 16; 42 | } else if (loaderSize < 60) { 43 | return 11; 44 | } 45 | return 20; 46 | } 47 | 48 | const Bouncing = keyframes` 49 | 0% { 50 | transform: translate3d(0, 10px, 0) scale(1.2, 0.85); 51 | } 52 | 53 | 100% { 54 | transform: translate3d(0, -20px, 0) scale(0.9, 1.1); 55 | } 56 | `; 57 | 58 | const LoaderBalls = styled('div')` 59 | width: inherit; 60 | display: flex; 61 | justify-content: space-between; 62 | align-items: center; 63 | `; 64 | 65 | const Ball = styled('div')` 66 | width: ${size ? `${bubbleConfig(size)}px` : `${bubbleConfig(dProps.size)}px`}; 67 | height: ${size ? `${bubbleConfig(size)}px` : `${bubbleConfig(dProps.size)}px`}; 68 | border-radius: 50%; 69 | `; 70 | 71 | const BallAnim1 = css` 72 | background: ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 73 | animation: ${Bouncing} ${duration ? duration : dProps.duration}s alternate infinite cubic-bezier(.6,.05,.15,.95); 74 | animation-play-state: ${pause ? 'paused' : 'running'}; 75 | `; 76 | 77 | const BallAnim2 = css` 78 | background: ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 79 | animation: ${Bouncing} ${duration ? duration : dProps.duration}s ${duration ? duration/4 : dProps.duration/4}s alternate infinite cubic-bezier(.6,.05,.15,.95) backwards; 80 | animation-play-state: ${pause ? 'paused' : 'running'}; 81 | `; 82 | 83 | const BallAnim3 = css` 84 | background: ${colors ? `${colors[2]}` : `${dProps.colors[2]}`}; 85 | animation: ${Bouncing} ${duration ? duration : dProps.duration}s ${duration ? duration/2 : dProps.duration/2}s alternate infinite cubic-bezier(.6,.05,.15,.95) backwards; 86 | animation-play-state: ${pause ? 'paused' : 'running'}; 87 | `; 88 | 89 | 90 | 91 | return ( 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | ) 100 | } 101 | 102 | 103 | export default BouncyBallsLoader; 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /src/circleFade/CircleFadeLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx } from '@emotion/core'; 7 | 8 | import { Colors, pauseAnim, loaderDuration, loaderColor } from '../utilities/utilities'; 9 | import LoaderBox from '../wrapper/wrapper'; 10 | 11 | 12 | 13 | export interface CircleFadeProps { 14 | loading: boolean; 15 | size?: number; 16 | pause?: boolean; 17 | duration?: number; 18 | color?: string; 19 | } 20 | 21 | const dProps = { 22 | loading: true, 23 | size: 40, 24 | duration: .5, 25 | color: Colors.Purple 26 | } 27 | 28 | 29 | const CircleFadeLoader = (props: CircleFadeProps) => { 30 | 31 | const { 32 | loading, 33 | size, 34 | pause, 35 | duration, 36 | color, 37 | } = props; 38 | 39 | const Dot1Anim = keyframes` 40 | 100% { 41 | transform: translateX(${size ? size*0.375 : dProps.size*0.375}px); 42 | opacity: 1; 43 | filter: none; 44 | } 45 | `; 46 | 47 | const Dot2Anim = keyframes` 48 | 100% { 49 | transform: translateX(${size ? size*0.375 : dProps.size*0.375}px); 50 | } 51 | `; 52 | 53 | const Dot3Anim = keyframes` 54 | 100% { 55 | transform: translateX(${size ? size*0.75 : dProps.size*0.75}px); 56 | opacity: 0; 57 | filter: alpha(opacity=0); 58 | } 59 | `; 60 | 61 | const Dots = styled('div')` 62 | display: flex; 63 | `; 64 | 65 | const Dot = styled('i')` 66 | width: ${size ? size*0.2 : dProps.size*0.2}px; 67 | height: ${size ? size*0.2 : dProps.size*0.2}px; 68 | display: block; 69 | background: ${loaderColor(color, dProps.color)}; 70 | border-radius: 50%; 71 | margin: 0 ${size ? (size*0.2)/2 : (dProps.size*0.2)/2}px; 72 | animation: ${Dot2Anim} ${loaderDuration(duration, dProps.duration)} linear infinite; 73 | animation-play-state: ${pauseAnim(pause)}; 74 | `; 75 | 76 | const dot1css = css` 77 | animation: ${Dot1Anim} ${loaderDuration(duration, dProps.duration)} linear infinite; 78 | opacity: 0; 79 | transform: translateX(-${size ? size*0.375 : dProps.size*0.375}px); 80 | animation-play-state: ${pauseAnim(pause)}; 81 | `; 82 | 83 | const dot4css = css` 84 | animation: ${Dot3Anim} ${loaderDuration(duration, dProps.duration)} linear infinite; 85 | animation-play-state: ${pauseAnim(pause)}; 86 | `; 87 | 88 | return ( 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | ) 98 | } 99 | 100 | export default CircleFadeLoader; -------------------------------------------------------------------------------- /src/circlePop/CirclePopLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes} from '@emotion/core'; 5 | 6 | import { Colors } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | export interface CirclePopProps { 11 | loading: boolean; 12 | size?: number; 13 | pause?: boolean; 14 | duration?: number; 15 | color?: string; 16 | } 17 | 18 | const dProps = { 19 | loading: true, 20 | size: 120, 21 | duration: 1, 22 | color: Colors.Purple 23 | } 24 | 25 | 26 | const CirclePopLoader = (props: CirclePopProps) => { 27 | 28 | const { 29 | loading, 30 | size, 31 | pause, 32 | duration, 33 | color, 34 | } = props; 35 | 36 | const Pop1 = keyframes` 37 | 0%, 70% { 38 | box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2); 39 | transform: scale(0); 40 | } 41 | 100% { 42 | box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.5); 43 | transform: scale(1); 44 | } 45 | `; 46 | 47 | const Pop2 = keyframes` 48 | 0%, 40% { 49 | box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2); 50 | transform: scale(0); 51 | } 52 | 100% { 53 | box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.5); 54 | transform: scale(1); 55 | } 56 | `; 57 | 58 | const Pop3 = keyframes` 59 | 0%, 10% { 60 | box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0); 61 | transform: scale(0); 62 | } 63 | 100% { 64 | box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.1); 65 | transform: scale(1); 66 | } 67 | `; 68 | 69 | const Center = styled('div')` 70 | position: absolute; 71 | width: inherit; 72 | height: inherit; 73 | display: flex; 74 | justify-content: center; 75 | align-items: center; 76 | `; 77 | 78 | const Circle1 = styled('div')` 79 | position: absolute; 80 | z-index: 3; 81 | width: 14%; 82 | height: 14%; 83 | background: ${color ? `${color}` : `${dProps.color}`}; 84 | border-radius: 50%; 85 | animation: ${Pop1} ${duration ? duration : dProps.duration}s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate; 86 | animation-play-state: ${pause ? 'paused' : 'running'}; 87 | animation-fill-mode: both; 88 | `; 89 | 90 | const Circle2 = styled('div')` 91 | position: absolute; 92 | z-index: 2; 93 | width: 27%; 94 | height: 27%; 95 | background: ${color ? `${color}` : `${dProps.color}`}; 96 | border-radius: 50%; 97 | animation: ${Pop2} ${duration ? duration : dProps.duration}s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate; 98 | animation-play-state: ${pause ? 'paused' : 'running'}; 99 | animation-fill-mode: both; 100 | `; 101 | 102 | const Circle3 = styled('div')` 103 | position: absolute; 104 | z-index: 1; 105 | width: 41%; 106 | height: 41%; 107 | background: ${color ? `${color}` : `${dProps.color}`}; 108 | border-radius: 50%; 109 | animation: ${Pop3} ${duration ? duration : dProps.duration}s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate; 110 | animation-play-state: ${pause ? 'paused' : 'running'}; 111 | animation-fill-mode: both; 112 | `; 113 | 114 | return ( 115 | 116 |
117 | 118 | 119 | 120 |
121 | 122 | ) 123 | } 124 | 125 | 126 | 127 | export default CirclePopLoader; -------------------------------------------------------------------------------- /src/clock/ClockLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface ClockProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | colors?: string[]; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 40, 22 | duration: 1, 23 | colors: [Colors.Purple, Colors.Purple] 24 | } 25 | 26 | 27 | const ClockLoader = (props: ClockProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | colors, 35 | } = props; 36 | 37 | const ClockAnim = keyframes` 38 | from { transform: rotate(0deg); } 39 | to { transform: rotate(359deg); } 40 | `; 41 | 42 | const Clock = styled('div')` 43 | width: inherit; 44 | height: inherit; 45 | border: 1px ${colors ? colors[0] : dProps.colors[0]} solid; 46 | border-radius: 50%; 47 | position: relative; 48 | 49 | &:before { 50 | content:''; 51 | border-left: 2px ${colors ? colors[1] : dProps.colors[1]} solid; 52 | position: absolute; 53 | top: 3px; 54 | left: 50%; 55 | height: calc( 50% - 2px ); 56 | transform: rotate(0deg); 57 | transform-origin: 0% 100%; 58 | animation: ${ClockAnim} ${loaderDuration(duration, dProps.duration)} infinite linear; 59 | animation-play-state: ${pauseAnim(pause)}; 60 | } 61 | 62 | `; 63 | 64 | return ( 65 | 66 | 67 | 68 | ) 69 | } 70 | 71 | export default ClockLoader; -------------------------------------------------------------------------------- /src/doubleSquare/DoubleSquareLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface DoubleSquareProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | colors?: string[]; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 30, 22 | duration: 2.5, 23 | colors: [Colors.Purple, Colors.Purple] 24 | } 25 | 26 | 27 | const DoubleSquareLoader = (props: DoubleSquareProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | colors, 35 | } = props; 36 | 37 | const DoubleSquareAnim = keyframes` 38 | from { 39 | transform: rotate(0deg); 40 | } 41 | to { 42 | transform: rotate(360deg); 43 | } 44 | `; 45 | 46 | const DoubleSquare = styled('div')` 47 | position: absolute; 48 | width: inherit; 49 | height: inherit; 50 | 51 | &:before, &:after { 52 | content: ''; 53 | position: absolute; 54 | width: ${size ? `${size*0.88}px` : `${dProps.size*0.88}px`}; 55 | height: ${size ? `${size*0.88}px` : `${dProps.size*0.88}px`}; 56 | } 57 | 58 | &:after { 59 | border: ${size ? `${size*0.07}px` : `${dProps.size*0.07}px`} solid ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 60 | animation: ${DoubleSquareAnim} ${loaderDuration(duration, dProps.duration)} linear infinite; 61 | animation-play-state: ${pauseAnim(pause)}; 62 | } 63 | 64 | &:before { 65 | border: ${size ? `${size*0.07}px` : `${dProps.size*0.07}px`} solid ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 66 | width: ${size ? `${size*1.3}px` : `${dProps.size*1.3}px`}; 67 | height: ${size ? `${size*1.3}px` : `${dProps.size*1.3}px`}; 68 | margin-left: -${size ? `${size*0.21}px` : `${dProps.size*0.21}px`}; 69 | margin-top: -${size ? `${size*0.21}px` : `${dProps.size*0.21}px`}; 70 | animation: ${DoubleSquareAnim} ${loaderDuration(duration, dProps.duration)} linear infinite; 71 | animation-play-state: ${pauseAnim(pause)}; 72 | animation-direction: reverse; 73 | } 74 | 75 | `; 76 | 77 | return ( 78 | 79 | 80 | 81 | ) 82 | } 83 | 84 | export default DoubleSquareLoader; -------------------------------------------------------------------------------- /src/drawWave/DrawWaveLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface DrawWaveProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | color?: string; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 50, 22 | duration: .8, 23 | color: Colors.Purple 24 | } 25 | 26 | 27 | const DrawWaveLoader = (props: DrawWaveProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | color, 35 | } = props; 36 | 37 | const Slide = keyframes` 38 | 50% { 39 | transform: translateY(10px); 40 | } 41 | `; 42 | 43 | const Loader = styled('div')` 44 | display: flex; 45 | `; 46 | 47 | const Wave = styled('div')` 48 | width: ${size ? `${size*0.2}px` : `${dProps.size*0.2}px` }; 49 | height: ${size ? `${size*0.44}px` : `${dProps.size*0.44}px` };; 50 | border: 2px solid #ffffff; 51 | background: ${color ? `${color}` : `${dProps.color}`}; 52 | margin-left: -2px; 53 | animation: ${Slide} ${loaderDuration(duration, dProps.duration)} infinite linear; 54 | animation-play-state: ${pauseAnim(pause)}; 55 | 56 | &:first-of-type { 57 | border-top-left-radius: 1000px; 58 | border-bottom-left-radius: 1000px; 59 | } 60 | 61 | &:last-of-type { 62 | border-top-right-radius: 1000px; 63 | border-bottom-right-radius: 1000px; 64 | } 65 | 66 | &:nth-of-type(2n+1) { 67 | animation-delay: ${duration ? duration/2 : dProps.duration/2}s; 68 | } 69 | `; 70 | 71 | return ( 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | ) 82 | } 83 | 84 | export default DrawWaveLoader; -------------------------------------------------------------------------------- /src/dyingLight/DyingLightLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx } from '@emotion/core'; 7 | 8 | import { Colors } from '../utilities/utilities'; 9 | import LoaderBox from '../wrapper/wrapper'; 10 | 11 | export interface DyingLightProps { 12 | loading: boolean; 13 | pause?: boolean; 14 | size?: number; 15 | colors?: string[]; 16 | } 17 | 18 | const dProps = { 19 | loading: true, 20 | size: 35, 21 | colors: [Colors.Purple, Colors.Purple] 22 | } 23 | 24 | const DyingLightLoader = (props: DyingLightProps) => { 25 | 26 | const { 27 | loading, 28 | pause, 29 | size, 30 | colors 31 | } = props; 32 | 33 | const borderColors = colors ? `1px solid ${colors[0]}` : `1px solid ${dProps.colors[0]}`; 34 | 35 | const DyingLightAnim = keyframes` 36 | 15% { 37 | transform: scale(1.6); 38 | } 39 | 40 | 50% { 41 | transform: rotate(-89deg); 42 | } 43 | 44 | 100% { 45 | transform: rotate(-90deg); 46 | } 47 | `; 48 | 49 | const Corners = css` 50 | &:before, &:after { 51 | display: block; 52 | content: ""; 53 | width: 50%; 54 | height: 50%; 55 | position: absolute; 56 | } 57 | `; 58 | 59 | const DLCore = styled('div')` 60 | width: inherit; 61 | height: inherit; 62 | position: absolute; 63 | background-color: ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 64 | `; 65 | 66 | const DLContainer = styled('div')` 67 | position: relative; 68 | width: inherit; 69 | height: inherit; 70 | display: inline-block; 71 | animation: ${DyingLightAnim} 1s ease infinite; 72 | animation-play-state: ${pause ? 'paused' : 'running'}; 73 | 74 | &:before { 75 | top: -5px; 76 | left: -5px; 77 | border-top: ${borderColors}; 78 | border-left: ${borderColors}; 79 | } 80 | 81 | &:after { 82 | top: -5px; 83 | right: -5px; 84 | border-top: ${borderColors}; 85 | border-right: ${borderColors}; 86 | } 87 | `; 88 | 89 | const DLSquare = styled('div')` 90 | &:before { 91 | bottom: -5px; 92 | left: -5px; 93 | border-bottom: ${borderColors}; 94 | border-left: ${borderColors}; 95 | } 96 | &:after { 97 | bottom: -5px; 98 | right: -5px; 99 | border-bottom: ${borderColors}; 100 | border-right: ${borderColors}; 101 | } 102 | `; 103 | 104 | 105 | return ( 106 | 107 | 108 | 109 | 110 | 111 | 112 | ) 113 | } 114 | 115 | 116 | export default DyingLightLoader; -------------------------------------------------------------------------------- /src/elasticCircle/ElasticCircleLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | 12 | export interface ElasticCircleProps { 13 | loading: boolean; 14 | size?: number; 15 | pause?: boolean; 16 | duration?: number; 17 | color?: string; 18 | } 19 | 20 | const dProps = { 21 | loading: true, 22 | size: 40, 23 | duration: 1, 24 | color: Colors.Purple 25 | } 26 | 27 | 28 | 29 | const ElasticCircleLoader = (props: ElasticCircleProps) => { 30 | 31 | const { 32 | loading, 33 | size, 34 | pause, 35 | duration, 36 | color, 37 | } = props; 38 | 39 | const ElasticAnim = keyframes` 40 | 0% { 41 | width: ${size ? `${size}px` : `${dProps.size}px`}; 42 | height: ${size ? `${size}px` : `${dProps.size}px`}; 43 | } 44 | 25% { 45 | height: 10%; 46 | } 47 | 50% { 48 | width: 10%; 49 | } 50 | 75% { 51 | width: 85%; 52 | } 53 | 100% { 54 | width: 85%; 55 | height: 85%; 56 | } 57 | `; 58 | 59 | const Loader = styled('div')` 60 | width: inherit; 61 | height: inherit; 62 | border-radius: 100%; 63 | border: ${color ? `4px solid ${color}` : `4px solid ${dProps.color}`}; 64 | background-color: transparent; 65 | animation: ${ElasticAnim} ${duration ? duration : dProps.duration}s infinite; 66 | animation-play-state: ${pause ? 'paused' : 'running'}; 67 | `; 68 | 69 | return ( 70 | 71 | 72 | 73 | ) 74 | } 75 | 76 | export default ElasticCircleLoader; -------------------------------------------------------------------------------- /src/fillCircle/FillCircleLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx } from '@emotion/core'; 7 | 8 | import { Colors, pauseAnim } from '../utilities/utilities'; 9 | import LoaderBox from '../wrapper/wrapper'; 10 | 11 | 12 | export interface FillCircleProps { 13 | loading: boolean; 14 | pause?: boolean; 15 | size?: number; 16 | colors?: string[]; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 60, 22 | colors: [Colors.Purple, Colors.Purple] 23 | } 24 | 25 | 26 | const FillCircleLoader = (props: FillCircleProps) => { 27 | 28 | const { 29 | loading, 30 | pause, 31 | size, 32 | colors 33 | } = props; 34 | 35 | const loaderSize = 40; 36 | const itemloaderSize = 10; 37 | let dur = 3.2; 38 | let rot = 0; 39 | let del = 0; 40 | 41 | const items: number[] = []; 42 | 43 | for(let i = 0; i < 8; i++) { 44 | items.push(i); 45 | } 46 | 47 | const anim = (index: number) => { 48 | const animation = keyframes` 49 | 0%, 60%, 100% { 50 | transform: rotate(${rot}deg) translateX(${loaderSize}px) scale(1); 51 | } 52 | 10%, 50% { 53 | transform: rotate(${rot}deg) translateX(0) scale(1.5); 54 | } 55 | `; 56 | return animation; 57 | } 58 | 59 | 60 | const CenterAnim = keyframes` 61 | 0%, 10%, 90%, 100% { 62 | transform: scale(0.7); 63 | } 64 | 45%, 55% { 65 | transform: scale(1.3); 66 | } 67 | `; 68 | 69 | const Loader = styled('div')` 70 | position: absolute; 71 | width: inherit; 72 | height: inherit; 73 | top: 50%; 74 | left: 50%; 75 | transform: translate(-50%, -50%) scale(${size ? `${size/100}` : `${dProps.size/100}`}); 76 | `; 77 | 78 | const Center = styled('div')` 79 | width: inherit; 80 | height: inherit; 81 | background: ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 82 | border-radius: 50%; 83 | animation: ${CenterAnim} ${dur}s ease-in-out infinite; 84 | animation-play-state: ${pauseAnim(pause)}; 85 | position: relative; 86 | z-index: 3; 87 | `; 88 | 89 | const Item = styled('div')` 90 | position: absolute; 91 | width: 15px; 92 | height: 15px; 93 | top: ${(loaderSize - itemloaderSize) /2}px; 94 | left: 0; 95 | right: 0; 96 | margin: auto; 97 | background: ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 98 | border-radius: 50%; 99 | z-index: 2; 100 | `; 101 | 102 | const renderItems = () => { 103 | return items.map((item, i) => { 104 | del = del + 0.2; 105 | rot = rot + 45; 106 | return ( 107 | 117 | ) 118 | })}; 119 | 120 | 121 | 122 | return ( 123 | 124 | 125 |
126 | {renderItems()} 127 | 128 | 129 | ) 130 | } 131 | 132 | 133 | 134 | export default FillCircleLoader; -------------------------------------------------------------------------------- /src/flip/FlipLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration, loaderColor } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface FlipProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | color?: string; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 45, 22 | duration: 1, 23 | color: Colors.Purple 24 | } 25 | 26 | 27 | const FlipLoader = (props: FlipProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | color, 35 | } = props; 36 | 37 | const FlipAnim = keyframes` 38 | 0% { 39 | transform: rotate(0); 40 | } 41 | 42 | 50% { 43 | transform: rotateY(180deg); 44 | } 45 | 46 | 100% { 47 | transform: rotateY(180deg) rotateX(180deg); 48 | } 49 | `; 50 | 51 | const Loader = styled('div')` 52 | perspective: 120px; 53 | position: relative; 54 | width: inherit; 55 | height: inherit; 56 | 57 | &:before { 58 | content: ""; 59 | position: absolute; 60 | top: 0; 61 | left: 0; 62 | width: ${size ? `${size}px` : `${dProps.size}px`}; 63 | height: ${size ? `${size}px` : `${dProps.size}px`}; 64 | background-color: ${loaderColor(color, dProps.color)}; 65 | animation: ${FlipAnim} ${loaderDuration(duration, dProps.duration)} infinite; 66 | animation-play-state: ${pauseAnim(pause)}; 67 | } 68 | `; 69 | 70 | return ( 71 | 72 | 73 | 74 | ) 75 | } 76 | 77 | export default FlipLoader; -------------------------------------------------------------------------------- /src/flippingCube/FlippingCubeLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx } from '@emotion/core'; 7 | 8 | import { Colors, pauseAnim, lightenDarkenColor } from '../utilities/utilities'; 9 | import LoaderBox from '../wrapper/wrapper'; 10 | 11 | 12 | 13 | export interface FlippingCubeProps { 14 | loading: boolean; 15 | size?: number; 16 | pause?: boolean; 17 | colors?: string[]; 18 | } 19 | 20 | const dProps = { 21 | loading: true, 22 | size: 35, 23 | colors: [Colors.Purple, Colors.Purple, Colors.Purple, Colors.Purple] 24 | } 25 | 26 | 27 | const FlippingCubeLoader = (props: FlippingCubeProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | colors, 34 | } = props; 35 | 36 | const FlippingCubeAnim = keyframes` 37 | 0%, 10% { 38 | transform: perspective(140px) rotateX(-180deg); 39 | opacity: 0; 40 | } 41 | 25%, 75% { 42 | transform: perspective(140px) rotateX(0deg); 43 | opacity: 1; 44 | } 45 | 90%, 100% { 46 | transform: perspective(140px) rotateY(180deg); 47 | opacity: 0; 48 | } 49 | `; 50 | 51 | const Wrapper = styled('div')` 52 | width: inherit; 53 | height: inherit; 54 | display: inline-block; 55 | transform: rotate(45deg); 56 | `; 57 | 58 | const Cube = styled('span')` 59 | position: relative; 60 | width: ${size ? `${size/2}px` : `${dProps.size/2}px`}; 61 | height: ${size ? `${size/2}px` : `${dProps.size/2}px`}; 62 | transform: scale(1.1); 63 | display: inline-block; 64 | 65 | &:before { 66 | content: ''; 67 | background-color: ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 68 | display: block; 69 | width: ${size ? `${size/2}px` : `${dProps.size/2}px`}; 70 | height: ${size ? `${size/2}px` : `${dProps.size/2}px`}; 71 | transform-origin: 100% 100%; 72 | animation: ${FlippingCubeAnim} 2.5s infinite linear both; 73 | animation-play-state: ${pauseAnim(pause)}; 74 | } 75 | `; 76 | 77 | const Cube2 = css` 78 | transform: rotateZ(90deg) scale(1.1); 79 | 80 | &:before{ 81 | animation-delay: 0.3s; 82 | background-color: ${colors ? `${lightenDarkenColor(colors[1], -10)}` : `${lightenDarkenColor(dProps.colors[1], -10)}`}; 83 | } 84 | `; 85 | 86 | const Cube3 = css` 87 | transform: rotateZ(270deg) scale(1.1); 88 | 89 | &:before{ 90 | animation-delay: 0.9s; 91 | background-color: ${colors ? `${lightenDarkenColor(colors[2], -10)}` : `${lightenDarkenColor(dProps.colors[2], -10)}`}; 92 | } 93 | `; 94 | 95 | const Cube4 = css` 96 | transform: rotateZ(180deg) scale(1.1); 97 | 98 | &:before{ 99 | animation-delay: 0.6s; 100 | background-color: ${colors ? `${lightenDarkenColor(colors[3], -20)}` : `${lightenDarkenColor(dProps.colors[3], -20)}`}; 101 | } 102 | `; 103 | 104 | return ( 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | ) 114 | } 115 | 116 | export default FlippingCubeLoader; -------------------------------------------------------------------------------- /src/gooey1/GooeyLoader1.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React from 'react'; 3 | 4 | import styled from '@emotion/styled'; 5 | import { keyframes, css, jsx } from '@emotion/core'; 6 | 7 | import { Colors, loaderColor } from '../utilities/utilities'; 8 | import LoaderBox from '../wrapper/wrapper'; 9 | 10 | 11 | 12 | export interface GooeyLoader1Props { 13 | loading: boolean; 14 | size?: number; 15 | pause?: boolean; 16 | color?: string; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 60, 22 | color: Colors.Purple 23 | } 24 | 25 | 26 | const GooeyLoader1 = (props: GooeyLoader1Props) => { 27 | 28 | const { 29 | loading, 30 | size, 31 | pause, 32 | color, 33 | } = props; 34 | 35 | const Circle = keyframes` 36 | 50% { 37 | width: 25%; 38 | height: 25%; 39 | } 40 | 100% { 41 | transform: rotate(360deg); 42 | } 43 | `; 44 | 45 | const Dot1 = css` 46 | animation-delay: .25s; 47 | `; 48 | 49 | const Dot2 = css` 50 | animation-delay: .5s; 51 | `; 52 | 53 | const Dot3 = css` 54 | animation-delay: .75s; 55 | `; 56 | 57 | const Dot4 = css` 58 | animation-delay: 1s; 59 | `; 60 | 61 | const Dot5 = css` 62 | animation-delay: 1.25s; 63 | `; 64 | 65 | 66 | 67 | const Container = styled('div')` 68 | position: relative; 69 | width: inherit; 70 | height: inherit; 71 | filter: url('#goo'); 72 | `; 73 | 74 | const Dot = styled('div')` 75 | position: absolute; 76 | background: ${loaderColor(color, dProps.color)}; 77 | width: 25%; 78 | height: 25%; 79 | border-radius: 50%; 80 | top:50%; 81 | left:50%; 82 | transform-origin: -50% -50%; 83 | animation: ${Circle} 2.5s infinite cubic-bezier(.57, 0, .52, 1); 84 | animation-play-state: ${pause ? 'paused' : 'running'}; 85 | `; 86 | 87 | const SVG = styled('svg')` 88 | width: 0; 89 | height: 0; 90 | `; 91 | 92 | return ( 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | ) 111 | } 112 | 113 | 114 | export default GooeyLoader1; -------------------------------------------------------------------------------- /src/gooey2/GooeyLoader2.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React from 'react'; 3 | 4 | import styled from '@emotion/styled'; 5 | import { keyframes, css, jsx } from '@emotion/core'; 6 | 7 | import { Colors, loaderColor } from '../utilities/utilities'; 8 | import LoaderBox from '../wrapper/wrapper'; 9 | 10 | 11 | 12 | export interface GooeyLoader2Props { 13 | loading: boolean; 14 | size?: number; 15 | pause?: boolean; 16 | color?: string; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 60, 22 | color: Colors.Purple 23 | } 24 | 25 | 26 | const GooeyLoader2 = (props: GooeyLoader2Props) => { 27 | 28 | const { 29 | loading, 30 | size, 31 | pause, 32 | color, 33 | } = props; 34 | 35 | const Sideways = keyframes` 36 | 33% { 37 | transform: translateX(20px); 38 | } 39 | 66% { 40 | transform: translateX(-10px); 41 | } 42 | `; 43 | 44 | const Dot1 = css` 45 | animation-delay: .25s; 46 | `; 47 | 48 | const Dot2 = css` 49 | animation-delay: .5s; 50 | `; 51 | 52 | const Dot3 = css` 53 | animation-delay: .75s; 54 | `; 55 | 56 | const Dot4 = css` 57 | animation-delay: 1s; 58 | `; 59 | 60 | const Dot5 = css` 61 | animation-delay: 1.25s; 62 | `; 63 | 64 | 65 | 66 | const Container = styled('div')` 67 | display: flex; 68 | justify-content: center; 69 | align-items: center; 70 | width: inherit; 71 | height: inherit; 72 | filter: url('#goo'); 73 | `; 74 | 75 | const Dot = styled('div')` 76 | background: ${loaderColor(color, dProps.color)}; 77 | width: ${size ? `${size*0.3}px` : `${dProps.size*0.3}px`}; 78 | height: ${size ? `${size*0.3}px` : `${dProps.size*0.3}px`}; 79 | margin: 0 5px; 80 | border-radius: 50%; 81 | transform: translateX(0); 82 | animation: ${Sideways} 2.5s infinite ease; 83 | animation-play-state: ${pause ? 'paused' : 'running'}; 84 | `; 85 | 86 | const SVG = styled('svg')` 87 | width: 0; 88 | height: 0; 89 | `; 90 | 91 | return ( 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | ) 110 | } 111 | 112 | 113 | export default GooeyLoader2; -------------------------------------------------------------------------------- /src/helix/HelixLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx } from '@emotion/core'; 7 | 8 | import { Colors, pauseAnim } from '../utilities/utilities'; 9 | import LoaderBox from '../wrapper/wrapper'; 10 | 11 | 12 | export interface HelixLoaderProps { 13 | loading: boolean; 14 | size?: number; 15 | pause?: boolean; 16 | duration?: number; 17 | colors?: string[]; 18 | numberOfDots?: number; 19 | } 20 | 21 | const dProps = { 22 | loading: true, 23 | size: 90, 24 | duration: 1.5, 25 | colors: [Colors.Purple, Colors.Yellow], 26 | numberOfDots: 10 27 | } 28 | 29 | 30 | 31 | const HelixLoader = (props: HelixLoaderProps) => { 32 | 33 | const { 34 | loading, 35 | size, 36 | pause, 37 | duration, 38 | colors, 39 | numberOfDots 40 | } = props; 41 | 42 | const customSize = size ? size : dProps.size; 43 | const dots = numberOfDots ? numberOfDots : dProps.numberOfDots; 44 | const time = duration ? duration : dProps.duration; 45 | const delay = 0.1; 46 | const padding = 0.6; 47 | 48 | const numberOfDot: number[] = []; 49 | 50 | for(let i = 0; i < dots; i++) { 51 | numberOfDot.push(i); 52 | } 53 | 54 | 55 | const DnaRotate = keyframes` 56 | 0% { 57 | opacity: 1; 58 | transform: scale(1); 59 | left:40%; 60 | z-index: 0; 61 | } 62 | 25% { 63 | opacity: 1; 64 | transform: scale(1.8); 65 | } 66 | 50% { 67 | opacity: 1; 68 | left:60%; 69 | z-index: 1; 70 | transform: scale(1); 71 | } 72 | 75% { 73 | opacity: 1; 74 | transform: scale(0.5); 75 | } 76 | 100% { 77 | opacity: 1; 78 | left:40%; 79 | z-index: 0; 80 | transform: scale(1); 81 | } 82 | `; 83 | 84 | const Loader = styled('div')` 85 | position: absolute; 86 | width: inherit; 87 | height: inherit; 88 | left: 50%; 89 | top: 50%; 90 | transform: translateX(-50%) translateY(-50%) rotate(-90deg) scaleX(-1); 91 | `; 92 | 93 | const Dot = styled('div')` 94 | position: absolute; 95 | left: 0; 96 | width: ${0.09*customSize}px; 97 | height: ${0.09*customSize}px; 98 | border-radius: 50%; 99 | opacity: 0; 100 | `; 101 | 102 | const renderDots = () => { 103 | return numberOfDot.map((child, index) => { 104 | return ( 105 | 122 | ) 123 | }) 124 | } 125 | 126 | return ( 127 | 128 | 129 | {renderDots()} 130 | 131 | 132 | ) 133 | } 134 | 135 | 136 | export default HelixLoader; -------------------------------------------------------------------------------- /src/hydrogen/HydrogenLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface HydrogenProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | colors?: string[]; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 45, 22 | duration: 0.6, 23 | colors: [Colors.Purple, Colors.Purple] 24 | } 25 | 26 | 27 | const HydrogenLoader = (props: HydrogenProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | colors, 35 | } = props; 36 | 37 | const HydrogenAnim = keyframes` 38 | from { transform: rotate(0deg); } 39 | to { transform: rotate(359deg); } 40 | `; 41 | 42 | const Hydrogen = styled('div')` 43 | width: inherit; 44 | height: inherit; 45 | position: relative; 46 | border: 1px ${colors ? `${colors[0]}` : `${dProps.colors[0]}`} solid; 47 | border-radius: 50%; 48 | animation: ${HydrogenAnim} ${loaderDuration(duration, dProps.duration)} infinite linear; 49 | animation-play-state: ${pauseAnim(pause)}; 50 | 51 | &:before, &:after { 52 | content: ''; 53 | position: absolute; 54 | width: 10px; 55 | height: 10px; 56 | background-color: ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 57 | border-radius: 50%; 58 | } 59 | 60 | &:before { 61 | top: calc( 50% - 5px ); 62 | left: calc( 50% - 5px ); 63 | } 64 | 65 | &:after { 66 | top: 1px; 67 | left: 1px; 68 | } 69 | 70 | `; 71 | 72 | return ( 73 | 74 | 75 | 76 | ) 77 | } 78 | 79 | export default HydrogenLoader; -------------------------------------------------------------------------------- /src/hypnosis/HypnosisLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx } from '@emotion/core'; 7 | 8 | import { Colors, pauseAnim, loaderDuration, lightenDarkenColor } from '../utilities/utilities'; 9 | import LoaderBox from '../wrapper/wrapper'; 10 | 11 | 12 | 13 | export interface HypnosisProps { 14 | loading: boolean; 15 | size?: number; 16 | pause?: boolean; 17 | duration?: number; 18 | colors?: string[]; 19 | } 20 | 21 | const dProps = { 22 | loading: true, 23 | size: 50, 24 | duration: 2, 25 | colors: ['#ffffff', Colors.Purple] 26 | } 27 | 28 | 29 | const HypnosisLoader = (props: HypnosisProps) => { 30 | 31 | const { 32 | loading, 33 | size, 34 | pause, 35 | duration, 36 | colors, 37 | } = props; 38 | 39 | const Spin = keyframes` 40 | 0% { 41 | transform: rotate(0deg); 42 | } 43 | 100% { 44 | transform: rotate(359deg); 45 | } 46 | `; 47 | 48 | const Circle = styled('div')` 49 | border-radius: 50%; 50 | box-sizing: border-box; 51 | border: 2px solid ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 52 | animation: ${Spin} ${loaderDuration(duration, dProps.duration)} linear infinite; 53 | animation-play-state: ${pauseAnim(pause)}; 54 | `; 55 | 56 | const lg = css` 57 | background-color: ${colors ? `${lightenDarkenColor(colors[1], 50)}` : `${lightenDarkenColor(dProps.colors[1], 50)}`}; 58 | width: inherit; 59 | height: inherit; 60 | `; 61 | 62 | const md = css` 63 | background-color: ${colors ? `${lightenDarkenColor(colors[1], 20)}` : `${lightenDarkenColor(dProps.colors[1], 20)}`}; 64 | width: ${size ? `${size-10}px` : `${dProps.size-10}px`}; 65 | height: ${size ? `${size-10}px` : `${dProps.size-10}px`}; 66 | `; 67 | 68 | const sm = css` 69 | background-color: ${colors ? `${lightenDarkenColor(colors[1], -20)}` : `${lightenDarkenColor(dProps.colors[1], -20)}`}; 70 | width: ${size ? `${size-20}px` : `${dProps.size-20}px`}; 71 | height: ${size ? `${size-20}px` : `${dProps.size-20}px`}; 72 | `; 73 | 74 | const smlr = css` 75 | background-color: ${colors ? `${lightenDarkenColor(colors[1], -50)}` : `${lightenDarkenColor(dProps.colors[1], -50)}`}; 76 | width: ${size ? `${size-30}px` : `${dProps.size-30}px`}; 77 | height: ${size ? `${size-30}px` : `${dProps.size-30}px`}; 78 | `; 79 | 80 | return ( 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | ) 91 | } 92 | 93 | export default HypnosisLoader; -------------------------------------------------------------------------------- /src/kissyBalls/KissyBallsLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface KissyBallsProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | colors?: string[]; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 60, 22 | duration: .5, 23 | colors: [Colors.Purple, Colors.Purple] 24 | } 25 | 26 | 27 | const KissyBallsLoader = (props: KissyBallsProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | colors, 35 | } = props; 36 | 37 | const Bounce1 = keyframes` 38 | 0% { 39 | transform: translate3d(0, 0, 0); 40 | } 41 | 100% { 42 | transform: translate3d(${size ? size*0.25 : dProps.size*0.25}px, 0, 0) scale(0.9, 2); 43 | } 44 | `; 45 | 46 | const Bounce2 = keyframes` 47 | 0% { 48 | transform: translate3d(0, 0, 0); 49 | } 50 | 100% { 51 | transform: translate3d(-${size ? size*0.25 : dProps.size*0.25}px, 0, 0) scale(0.9, 2); 52 | } 53 | `; 54 | 55 | const KissyBalls = styled('div')` 56 | position: relative; 57 | width: inherit; 58 | height: ${size ? size/2 : dProps.size/2}px; 59 | 60 | &:after, &:before { 61 | position: absolute; 62 | content: ""; 63 | height: ${size ? size*0.33 : dProps.size*0.33}px; 64 | width: ${size ? size*0.33 : dProps.size*0.33}px; 65 | top: ${size ? size*0.055 : dProps.size*0.055}px; 66 | border-radius: 50%; 67 | } 68 | 69 | &:after { 70 | background-color: ${colors ? colors[0] : dProps.colors[0]}; 71 | left: ${size ? size*0.66 : dProps.size*0.66}px; 72 | animation: ${Bounce2} ${loaderDuration(duration, dProps.duration)} ease-in-out infinite; 73 | animation-direction: alternate; 74 | animation-play-state: ${pauseAnim(pause)}; 75 | } 76 | 77 | &:before { 78 | background-color: ${colors ? colors[1] : dProps.colors[1]}; 79 | animation: ${Bounce1} ${loaderDuration(duration, dProps.duration)} ease-in-out infinite; 80 | animation-direction: alternate; 81 | animation-play-state: ${pauseAnim(pause)}; 82 | } 83 | `; 84 | 85 | return ( 86 | 87 | 88 | 89 | ) 90 | } 91 | 92 | export default KissyBallsLoader; -------------------------------------------------------------------------------- /src/line/LineLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx } from '@emotion/core'; 7 | 8 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 9 | 10 | 11 | 12 | export interface LineProps { 13 | loading: boolean; 14 | lineWidth?: number; 15 | pause?: boolean; 16 | duration?: number; 17 | color?: string; 18 | } 19 | 20 | const dProps = { 21 | loading: true, 22 | lineWidth: 25, 23 | duration: 2, 24 | color: Colors.Purple 25 | } 26 | 27 | const LineLoader = (props: LineProps) => { 28 | 29 | const { 30 | loading, 31 | pause, 32 | lineWidth, 33 | duration, 34 | color, 35 | } = props; 36 | 37 | const numberOfChildren = lineWidth ? lineWidth : dProps.lineWidth; 38 | const lineChildren: number[] = []; 39 | 40 | for(let i = 0; i < numberOfChildren; i++) { 41 | lineChildren.push(i); 42 | } 43 | 44 | const LineAnim = keyframes` 45 | 0% { 46 | transform: scale(1); 47 | } 48 | 50% { 49 | background-color: ${color ? `${color}` : `${dProps.color}`}; 50 | opacity: 1; 51 | transform: scale(3); 52 | } 53 | 100% { 54 | transform: scale(1); 55 | } 56 | `; 57 | 58 | const Loader = styled('div')` 59 | height: 2px; 60 | display: ${loading ? 'flex' : 'none'}; 61 | `; 62 | 63 | const Line = styled('div')` 64 | animation: ${loaderDuration(duration, dProps.duration)} ease infinite ${LineAnim}; 65 | animation-play-state: ${pauseAnim(pause)}; 66 | background-color: ${color ? `${color}` : `${dProps.color}`}; 67 | border-radius: 0; 68 | display: inline-block; 69 | height: 100%; 70 | opacity: 0; 71 | transform: scale(1); 72 | vertical-align: top; 73 | width: 5px; 74 | `; 75 | 76 | const renderLine = () => { 77 | return lineChildren.map((child, index) => { 78 | let time = index * 0.05; 79 | return ( 80 | 86 | ) 87 | }) 88 | } 89 | 90 | return ( 91 | 92 | {renderLine()} 93 | 94 | ) 95 | } 96 | 97 | 98 | 99 | export default LineLoader; -------------------------------------------------------------------------------- /src/linneard/LinneardLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx } from '@emotion/core'; 7 | 8 | import { Colors, pauseAnim } from '../utilities/utilities'; 9 | import LoaderBox from '../wrapper/wrapper'; 10 | 11 | 12 | export interface LinneardLoaderProps { 13 | loading: boolean; 14 | size?: number; 15 | pause?: boolean; 16 | duration?: number; 17 | colors?: string[]; 18 | } 19 | 20 | const dProps = { 21 | loading: true, 22 | size: 130, 23 | duration: .8, 24 | colors: [Colors.Purple, Colors.Pink] 25 | } 26 | 27 | 28 | 29 | const LinneardLoader = (props: LinneardLoaderProps) => { 30 | 31 | const { 32 | loading, 33 | size, 34 | pause, 35 | duration, 36 | colors, 37 | } = props; 38 | 39 | const customSize = size ? size : dProps.size; 40 | const dots = 23; 41 | 42 | const cellR = customSize*.3; 43 | const dotR = customSize*.05; 44 | 45 | const da = 360/dots; 46 | const dur = duration ? duration : dProps.duration; 47 | const ddur = dur/dots; 48 | 49 | const numberOfDots: number[] = []; 50 | 51 | for(let i = 0; i < dots; i++) { 52 | numberOfDots.push(i); 53 | } 54 | 55 | 56 | const LinneardAnim = keyframes` 57 | to { 58 | top: 100%; 59 | transform: scale(.5); 60 | background-color: ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 61 | } 62 | `; 63 | 64 | const Wrapper = styled('div')` 65 | position: relative; 66 | overflow: hidden; 67 | position: relative; 68 | width: inherit; 69 | height: inherit; 70 | flex-grow: 1; 71 | padding: ${customSize*.5}px; 72 | `; 73 | 74 | const Loader = styled('div')` 75 | position: absolute; 76 | top: 50%; 77 | left: 50%; 78 | `; 79 | 80 | const Dot = styled('div')` 81 | position: absolute; 82 | top: ${-1*cellR}px; 83 | height: ${cellR*2}px; 84 | 85 | &:after { 86 | content: ""; 87 | position: absolute; 88 | top: 0; 89 | transform: translateX(-50%) translateY(-50%); 90 | width: ${dotR}px; 91 | height: ${dotR}px; 92 | background-color: ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 93 | border-radius: 100%; 94 | transform: scale(1); 95 | animation: ${LinneardAnim} ${dur}s infinite alternate; 96 | animation-play-state: ${pauseAnim(pause)}; 97 | } 98 | `; 99 | 100 | const renderDots = () => { 101 | return numberOfDots.map((child, index) => { 102 | return ( 103 | 114 | ) 115 | }) 116 | } 117 | 118 | return ( 119 | 120 | 121 | 122 | {renderDots()} 123 | 124 | 125 | 126 | ) 127 | } 128 | 129 | 130 | export default LinneardLoader; -------------------------------------------------------------------------------- /src/liquid/LiquidLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | export interface LiquidLoaderProps { 10 | loading: boolean; 11 | color?: string; 12 | pause?: boolean; 13 | size?: number | undefined; 14 | duration?: number; 15 | } 16 | 17 | const dProps = { 18 | loading: true, 19 | size: 40, 20 | color: Colors.Purple, 21 | duration: 2 22 | } 23 | 24 | 25 | const LiquidLoader = (props: LiquidLoaderProps) => { 26 | 27 | const { 28 | loading, 29 | pause, 30 | size, 31 | color, 32 | duration 33 | } = props; 34 | 35 | const LiquidAnim = keyframes` 36 | 0% { 37 | transform: rotate( 0deg ); 38 | } 39 | 40 | 100% { 41 | transform: rotate( 360deg ); 42 | } 43 | 44 | `; 45 | 46 | const liquidSize = 100; 47 | 48 | const DIV = styled('div')` 49 | transform: scale(${size ? size/100 : dProps.size/100}); 50 | `; 51 | 52 | const Loader = styled('div')` 53 | position: absolute; 54 | margin: -${liquidSize/2}px 0 0 -${liquidSize/2}px; 55 | border: ${liquidSize*0.1}px solid ${Colors.Purple}; 56 | box-sizing: border-box; 57 | overflow: hidden; 58 | width: ${liquidSize}px; 59 | height: ${liquidSize}px; 60 | left: 50%; 61 | top: 50%; 62 | animation: ${LiquidAnim} ${duration ? `${duration}s` : `${dProps.duration}s`} linear infinite reverse; 63 | animation-play-state: ${pause ? 'paused' : 'running'}; 64 | filter: url(#goo); 65 | box-shadow: 0 0 0 1px ${color ? `${color}` : `${dProps.color}`} inset; 66 | 67 | &:before { 68 | content: ""; 69 | position: absolute; 70 | animation: ${LiquidAnim} ${duration ? `${duration}s` : `${dProps.duration}s`} cubic-bezier(.59,.25,.4,.69) infinite; 71 | animation-play-state: ${pause ? 'paused' : 'running'}; 72 | background: ${color ? `${color}` : `${dProps.color}`}; 73 | transform-origin: top center; 74 | border-radius: 50%; 75 | width: 150%; 76 | height: 150%; 77 | top: 50%; 78 | left: -12.5%; 79 | } 80 | `; 81 | 82 | return ( 83 | 84 |
85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |
97 | 98 | ) 99 | } 100 | 101 | export default LiquidLoader; -------------------------------------------------------------------------------- /src/movingSquare/MovingSquareLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface MovingSquareProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | colors?: string[]; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 60, 22 | duration: 1, 23 | colors: [Colors.Purple, Colors.Purple] 24 | } 25 | 26 | 27 | const MovingSquareLoader = (props: MovingSquareProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | colors, 35 | } = props; 36 | 37 | const SquareMove = keyframes` 38 | 0%, 100%{ 39 | transform: translate(0,0) rotate(0); 40 | } 41 | 42 | 25%{ 43 | transform: translate(30px,30px) rotate(45deg); 44 | } 45 | 46 | 50%{ 47 | transform: translate(0px,60px) rotate(0deg); 48 | } 49 | 50 | 75%{ 51 | transform: translate(-30px,30px) rotate(45deg); 52 | } 53 | `; 54 | 55 | const Loader = styled('div')` 56 | transform: ${size ? `scale(${size/100})` : `scale(${dProps.size/100})`}; 57 | transform-origin: center; 58 | position: relative; 59 | width: inherit; 60 | height: inherit; 61 | 62 | 63 | &:before, &:after { 64 | content: ""; 65 | width: 20px; 66 | height: 20px; 67 | position: absolute; 68 | top: 0; 69 | left: 0; 70 | animation: ${SquareMove} ${loaderDuration(duration, dProps.duration)} ease-in-out infinite; 71 | animation-play-state: ${pauseAnim(pause)}; 72 | } 73 | 74 | &:before { 75 | background-color: ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 76 | } 77 | 78 | &:after { 79 | background-color: ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 80 | animation-delay: ${duration ? `${duration/2}s` : `${dProps.duration/2}s`}; 81 | } 82 | `; 83 | 84 | return ( 85 | 86 | 87 | 88 | ) 89 | } 90 | 91 | export default MovingSquareLoader; -------------------------------------------------------------------------------- /src/notepad/NotepadLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx } from '@emotion/core'; 7 | 8 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 9 | import LoaderBox from '../wrapper/wrapper'; 10 | 11 | 12 | 13 | export interface NotePadProps { 14 | loading: boolean; 15 | size?: number; 16 | pause?: boolean; 17 | duration?: number; 18 | colors?: string[]; 19 | } 20 | 21 | const dProps = { 22 | loading: true, 23 | size: 30, 24 | duration: 2, 25 | colors: [Colors.Purple, Colors.Purple] 26 | } 27 | 28 | 29 | const NotePadLoader = (props: NotePadProps) => { 30 | 31 | const { 32 | loading, 33 | size, 34 | pause, 35 | duration, 36 | colors, 37 | } = props; 38 | 39 | const NotePadAnim = keyframes` 40 | 0% { 41 | width : 0px; 42 | opacity: 0; 43 | } 44 | 33% { 45 | width : ${size ? `${size*0.56}px` : `${dProps.size*0.56}px`}; 46 | opacity : 1; 47 | } 48 | 70% { 49 | opacity : 1; 50 | } 51 | 100% { 52 | opacity : 0; 53 | } 54 | `; 55 | 56 | const NotePad = styled('div')` 57 | width: inherit; 58 | `; 59 | 60 | const Binding = styled('div')` 61 | content : ''; 62 | width : inherit; 63 | height : ${size ? `${size*0.15}px` : `${dProps.size*0.15}px`}; 64 | border : 2px solid ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 65 | `; 66 | 67 | const Pad = styled('div')` 68 | width : 100%; 69 | height : ${size ? `${size*1.2}px` : `${dProps.size*1.2}px`}; 70 | border : 2px solid ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 71 | border-top : 0; 72 | display: flex; 73 | flex-direction: column; 74 | align-items: center; 75 | justify-content: center; 76 | `; 77 | 78 | const Line = styled('div')` 79 | width : ${size ? `${size*0.56}px` : `${dProps.size*0.56}px`}; 80 | margin-top : ${size ? `${size*0.15}px` : `${dProps.size*0.15}px`}; 81 | border-top : 2px solid ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 82 | opacity : 0; 83 | animation : ${NotePadAnim} ${loaderDuration(duration, dProps.duration)} infinite ease-in; 84 | animation-play-state: ${pauseAnim(pause)}; 85 | `; 86 | 87 | return ( 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | ) 99 | } 100 | 101 | export default NotePadLoader; -------------------------------------------------------------------------------- /src/pingPong/PingPongLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface PingPongProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | colors?: string[]; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 90, 22 | duration: .8, 23 | colors: [Colors.Purple, Colors.Purple] 24 | } 25 | 26 | 27 | const PingPongLoader = (props: PingPongProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | colors, 35 | } = props; 36 | 37 | const Bounce = keyframes` 38 | 0% { 39 | transform: translate3d(0, ${size ? size*0.02 : dProps.size*0.02}px, 0) scale(0.9, 1.1); 40 | } 41 | 100% { 42 | transform: translate3d(0, ${size ? size*0.39 : dProps.size*0.39}px, 0) scale(1.2, 0.85); 43 | } 44 | `; 45 | 46 | const Swing = keyframes` 47 | 0% { 48 | transform: rotate(-45deg); 49 | } 50 | 51 | 100% { 52 | transform: rotate(45deg); 53 | } 54 | `; 55 | 56 | const PingPong = styled('div')` 57 | border-radius: 50%; 58 | position: relative; 59 | width: inherit ; 60 | height: inherit ; 61 | 62 | &:after, &:before { 63 | position: absolute; 64 | content: ""; 65 | } 66 | 67 | &:after { 68 | height: ${size ? size*0.055 : dProps.size*0.055}px; 69 | width: ${size ? size*0.55 : dProps.size*0.55}px; 70 | background-color: ${colors ? colors[0] : dProps.colors[0]}; 71 | top: ${size ? size*0.6 : dProps.size*0.6}px; 72 | left: ${size ? size*0.22 : dProps.size*0.22}px; 73 | animation: ${Swing} ${duration ? duration : dProps.duration}s ease-in-out infinite; 74 | animation-direction: alternate; 75 | animation-play-state: ${pauseAnim(pause)}; 76 | } 77 | 78 | &:before { 79 | height: ${size ? size*0.11 : dProps.size*0.11}px; 80 | width: ${size ? size*0.11 : dProps.size*0.11}px; 81 | background-color: ${colors ? colors[1] : dProps.colors[1]}; 82 | border-radius: 50%; 83 | top: ${size ? size*0.16 : dProps.size*0.16}px; 84 | left: ${size ? size*0.43 : dProps.size*0.43}px; 85 | animation: ${Bounce} ${duration ? duration/2 : dProps.duration/2}s ease-in-out infinite; 86 | animation-direction: alternate; 87 | animation-play-state: ${pauseAnim(pause)}; 88 | } 89 | `; 90 | 91 | return ( 92 | 93 | 94 | 95 | ) 96 | } 97 | 98 | export default PingPongLoader; -------------------------------------------------------------------------------- /src/pip/PipLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | 5 | import styled from '@emotion/styled'; 6 | import { keyframes, css, jsx } from '@emotion/core'; 7 | 8 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 9 | import LoaderBox from '../wrapper/wrapper'; 10 | 11 | 12 | 13 | export interface PipProps { 14 | loading: boolean; 15 | size?: number; 16 | pause?: boolean; 17 | duration?: number; 18 | color?: string; 19 | } 20 | 21 | const dProps = { 22 | loading: true, 23 | size: 15, 24 | duration: .8, 25 | color: Colors.Purple 26 | } 27 | 28 | const PipLoader = (props: PipProps) => { 29 | 30 | const { 31 | loading, 32 | pause, 33 | size, 34 | duration, 35 | color, 36 | } = props; 37 | 38 | const numberOfChildren = 7; 39 | const PipChildren: number[] = []; 40 | 41 | for(let i = 0; i < numberOfChildren; i++) { 42 | PipChildren.push(i); 43 | } 44 | 45 | const PipAnim = keyframes` 46 | 0%, 15%, 85%, 100% { 47 | transform: translateY(${size ? `${size*0.0001}px` : `${dProps.size*0.0001}px`}); 48 | box-shadow: 0 0 0 1px ${color ? color : dProps.color}; 49 | } 50 | 45%, 55% { 51 | transform: translateY(0px); 52 | box-shadow: 0 0 0 ${size ? `${size*0.42}px` : `${dProps.size*0.42}px`} ${color ? color : dProps.color}; 53 | } 54 | `; 55 | 56 | const Pip = styled('div')` 57 | position: absolute; 58 | width: ${size ? `${size}px` : `${dProps.size}px`}; 59 | height: ${size ? `${size*5}px` : `${dProps.size*5}px`}; 60 | 61 | &:before { 62 | content: ''; 63 | position: absolute; 64 | top: ${size ? `${size*0.75}px` : `${dProps.size*0.75}px`}; 65 | left: 0; 66 | width: ${size ? `${size}px` : `${dProps.size}px`}; 67 | height: ${size ? `${size}px` : `${dProps.size}px`}; 68 | box-shadow: 0 0 0 1px ${color ? color : dProps.color}; 69 | border-radius: 50%; 70 | background: ${color ? color : dProps.color}; 71 | animation: ${PipAnim} ${loaderDuration(duration, dProps.duration)} infinite linear; 72 | animation-play-state: ${pauseAnim(pause)}; 73 | } 74 | 75 | `; 76 | 77 | const renderPip = () => { 78 | return PipChildren.map((child, index) => { 79 | return ( 80 | 90 | ) 91 | }) 92 | } 93 | 94 | return ( 95 | 96 | {renderPip()} 97 | 98 | ) 99 | } 100 | 101 | 102 | 103 | export default PipLoader; -------------------------------------------------------------------------------- /src/pulseBubble/PulseBubbleLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React from 'react'; 3 | 4 | import styled from '@emotion/styled'; 5 | import { keyframes, css, jsx } from '@emotion/core'; 6 | 7 | import { Colors } from '../utilities/utilities'; 8 | import LoaderBox from '../wrapper/wrapper'; 9 | 10 | 11 | export interface PulseBubbleProps { 12 | loading: boolean; 13 | pause?: boolean; 14 | size?: number; 15 | colors?: string[]; 16 | } 17 | 18 | const dProps = { 19 | loading: true, 20 | size: 55, 21 | colors: [Colors.Purple, Colors.Purple, Colors.Purple] 22 | } 23 | 24 | 25 | const PulseBubbleLoader = (props: PulseBubbleProps) => { 26 | 27 | const { 28 | loading, 29 | pause, 30 | size, 31 | colors 32 | } = props; 33 | 34 | const bubbleConfig = (loaderSize: number) => { 35 | if (loaderSize < 80 && loaderSize > 60) { 36 | return 15; 37 | } else if (loaderSize < 60) { 38 | return 11; 39 | } 40 | return 20; 41 | } 42 | 43 | const PulseAnimation = keyframes` 44 | from { 45 | opacity: 1; 46 | transform: scale(1); 47 | } 48 | to { 49 | opacity: .25; 50 | transform: scale(.75); 51 | } 52 | `; 53 | 54 | const PulseContainer = styled('div')` 55 | width: inherit; 56 | display: flex; 57 | justify-content: space-between; 58 | align-items: center; 59 | `; 60 | 61 | const PulseBubble = styled('div')` 62 | width: ${size ? `${bubbleConfig(size)}px` : `${bubbleConfig(dProps.size)}px`}; 63 | height: ${size ? `${bubbleConfig(size)}px` : `${bubbleConfig(dProps.size)}px`}; 64 | border-radius: 50%; 65 | `; 66 | 67 | const Bubble1 = css` 68 | background-color: ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 69 | animation: ${PulseAnimation} .4s ease 0s infinite alternate; 70 | animation-play-state: ${pause ? 'paused' : 'running'}; 71 | `; 72 | 73 | const Bubble2 = css` 74 | background-color: ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 75 | animation: ${PulseAnimation} .4s ease .1s infinite alternate; 76 | animation-play-state: ${pause ? 'paused' : 'running'}; 77 | `; 78 | 79 | const Bubble3 = css` 80 | background-color: ${colors ? `${colors[2]}` : `${dProps.colors[2]}`}; 81 | animation: ${PulseAnimation} .4s ease .2s infinite alternate; 82 | animation-play-state: ${pause ? 'paused' : 'running'}; 83 | `; 84 | 85 | return ( 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | ) 94 | } 95 | 96 | 97 | 98 | export default PulseBubbleLoader; -------------------------------------------------------------------------------- /src/rotatingBoxes/RotatingBoxesLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | 12 | export interface RotatingBoxesProps { 13 | loading: boolean; 14 | pause?: boolean; 15 | duration?: number; 16 | size?: number; 17 | boxBorderWidth?: number; 18 | colors?: string[]; 19 | } 20 | 21 | 22 | const dProps = { 23 | loading: true, 24 | duration: 3, 25 | size: 40, 26 | boxBorderWidth: 2, 27 | colors: [ 28 | '#fafafa', 29 | '#fafafa', 30 | Colors.Purple, 31 | Colors.Purple 32 | ] 33 | } 34 | 35 | const RotatingBoxesLoader = (props: RotatingBoxesProps) => { 36 | const { 37 | loading, 38 | pause, 39 | duration, 40 | size, 41 | boxBorderWidth, 42 | colors 43 | } = props; 44 | 45 | const Box1Animation = keyframes` 46 | 0% { 47 | transform: rotate(0); 48 | } 49 | 25% { 50 | transform: rotate(90deg); 51 | } 52 | 50% { 53 | transform: rotate(180deg); 54 | } 55 | 75% { 56 | transform: rotate(270deg); 57 | } 58 | 100% { 59 | transform: rotate(360deg); 60 | } 61 | `; 62 | 63 | const Box2Animation = keyframes` 64 | 0% { 65 | transform: rotate(45deg); 66 | } 67 | 25% { 68 | transform: rotate(-45deg); 69 | } 70 | 50% { 71 | transform: rotate(-135deg); 72 | } 73 | 75% { 74 | transform: rotate(-225deg); 75 | } 76 | 100% { 77 | transform: rotate(-315deg); 78 | } 79 | `; 80 | 81 | 82 | const Box1 = styled('div')` 83 | width: inherit; 84 | height: inherit; 85 | position: absolute; 86 | display: flex; 87 | justify-content: center; 88 | align-items: center; 89 | padding: ${boxBorderWidth ? `${boxBorderWidth}px` : `${dProps.boxBorderWidth}px`}; 90 | background: ${colors ? `${colors[2]}` : `${dProps.colors[2]}`}; 91 | animation: ${Box1Animation} ease-in-out 0s infinite alternate; 92 | animation-play-state: ${pause ? 'paused' : 'running'}; 93 | animation-duration: ${duration ? `${duration}s` : `${dProps.duration}s`}; 94 | `; 95 | 96 | const Box2 = styled('div')` 97 | width: inherit; 98 | height: inherit; 99 | position: absolute; 100 | display: flex; 101 | justify-content: center; 102 | align-items: center; 103 | transform: rotate(45deg); 104 | padding: ${boxBorderWidth ? `${boxBorderWidth}px` : `${dProps.boxBorderWidth}px`}; 105 | background: ${colors ? `${colors[3]}` : `${dProps.colors[3]}`}; 106 | animation: ${Box2Animation} ease-in-out 0s infinite alternate; 107 | animation-play-state: ${pause ? 'paused' : 'running'}; 108 | animation-duration: ${duration ? `${duration}s` : `${dProps.duration}s`}; 109 | `; 110 | 111 | const BoxCore = styled('div')` 112 | width: 100%; 113 | height: 100%; 114 | `; 115 | 116 | 117 | return( 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | ) 127 | } 128 | 129 | 130 | export default RotatingBoxesLoader; -------------------------------------------------------------------------------- /src/rotatingCircle/RotatingCircleLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface RotatingCircleProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | colors?: string[]; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 20, 22 | duration: 1.2, 23 | colors: [Colors.Purple, Colors.Purple, Colors.Yellow, Colors.Pink] 24 | } 25 | 26 | 27 | const RotatingCircleLoader = (props: RotatingCircleProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | colors, 35 | } = props; 36 | 37 | const Anim12 = keyframes` 38 | 50% { 39 | transform: scale(1.3) translate(0, 0); 40 | box-shadow: 0 0 0 ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 41 | opacity: .8; 42 | } 43 | `; 44 | 45 | const Anim34 = keyframes` 46 | 50% { 47 | transform: scale(1.3) translate(0, 0); 48 | box-shadow: 0 0 0 ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 49 | opacity: .8; 50 | } 51 | `; 52 | 53 | const AnimRotate = keyframes` 54 | 0% { transform: rotate(0deg); } 55 | 50% { transform: rotate(360deg); } 56 | 100% { transform: rotate(720deg); } 57 | `; 58 | 59 | const RotatingCircle = styled('div')` 60 | position: relative; 61 | width: 0; 62 | height: 0; 63 | margin: 4em auto; 64 | animation: ${AnimRotate} ${loaderDuration(duration, dProps.duration)} infinite ease; 65 | animation-play-state: ${pauseAnim(pause)}; 66 | 67 | &:before, 68 | &:after { 69 | content: ''; 70 | position: absolute; 71 | width: ${size ? `${size}px` : `${dProps.size}px`}; 72 | height: ${size ? `${size}px` : `${dProps.size}px`}; 73 | top: 50%; 74 | left: 50%; 75 | margin-top: ${size ? `-${size/2}px` : `-${dProps.size/2}px`}; 76 | margin-left: ${size ? `-${size/2}px` : `-${dProps.size/2}px`}; 77 | border-radius: ${size ? `${size/2}px` : `${dProps.size/2}px`}; 78 | opacity: .9; 79 | } 80 | 81 | &::before { 82 | background: ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 83 | transform: translate(${size ? `-${size*0.6}px` : `-${dProps.size*0.6}px`}, ${size ? `-${size*0.6}px` : `-${dProps.size*0.6}px`}) scale(1); 84 | box-shadow: ${size ? `${size*1.2}px` : `${dProps.size*1.2}px`} ${size ? `${size*1.2}px` : `${dProps.size*1.2}px`} 0 ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 85 | animation: ${Anim12} ${loaderDuration(duration, dProps.duration)} infinite ease; 86 | animation-play-state: ${pauseAnim(pause)}; 87 | } 88 | 89 | &:after { 90 | background: ${colors ? `${colors[2]}` : `${dProps.colors[2]}`}; 91 | transform: translate(${size ? `${size*0.6}px` : `${dProps.size*0.6}px`}, ${size ? `-${size*0.6}px` : `-${dProps.size*0.6}px`}) scale(1); 92 | box-shadow: ${size ? `-${size*1.2}px` : `-${dProps.size*1.2}px`} ${size ? `${size*1.2}px` : `${dProps.size*1.2}px`} 0 ${colors ? `${colors[3]}` : `${dProps.colors[3]}`}; 93 | animation: ${Anim34} ${loaderDuration(duration, dProps.duration)} infinite ease; 94 | animation-play-state: ${pauseAnim(pause)}; 95 | } 96 | `; 97 | 98 | return ( 99 | 100 | 101 | 102 | ) 103 | } 104 | 105 | export default RotatingCircleLoader; -------------------------------------------------------------------------------- /src/slices/SlicesLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration, convertToRgba } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface SlicesProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | color?: string; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 80, 22 | duration: 1, 23 | color: Colors.Purple 24 | } 25 | 26 | 27 | const SlicesLoader = (props: SlicesProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | color, 35 | } = props; 36 | 37 | const SlicesAnim = keyframes` 38 | 0% { 39 | border-top: ${color ? convertToRgba(color, 75) : convertToRgba(dProps.color, 75)} solid; 40 | border-right: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 41 | border-bottom: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 42 | border-left: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 43 | } 44 | 25% { 45 | border-top: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 46 | border-right: ${color ? convertToRgba(color, 75) : convertToRgba(dProps.color, 75)} solid; 47 | border-bottom: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 48 | border-left: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 49 | } 50 | 50% { 51 | border-top: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 52 | border-right: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 53 | border-bottom: ${color ? convertToRgba(color, 75) : convertToRgba(dProps.color, 75)} solid; 54 | border-left: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 55 | } 56 | 75% { 57 | border-top: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 58 | border-right: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 59 | border-bottom: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 60 | border-left: ${color ? convertToRgba(color, 75) : convertToRgba(dProps.color, 75)} solid; 61 | } 62 | 100% { 63 | border-top: ${color ? convertToRgba(color, 75) : convertToRgba(dProps.color, 75)} solid; 64 | border-right: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 65 | border-bottom: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 66 | border-left: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 67 | } 68 | `; 69 | 70 | 71 | const Slices = styled('div')` 72 | border-radius: 50%; 73 | border-top: 16px ${color ? convertToRgba(color, 75) : convertToRgba(dProps.color, 75)} solid; 74 | border-left: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 75 | border-bottom: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 76 | border-right: ${color ? convertToRgba(color, 25) : convertToRgba(dProps.color, 25)} solid; 77 | animation: ${SlicesAnim} ${loaderDuration(duration, dProps.duration)} infinite linear; 78 | animation-play-state: ${pauseAnim(pause)}; 79 | transform: scale(${size ? size/10 : dProps.size/10}); 80 | `; 81 | 82 | return ( 83 | 84 | 85 | 86 | ) 87 | } 88 | 89 | export default SlicesLoader; -------------------------------------------------------------------------------- /src/sphere/SphereLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface SphereProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | color?: string; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 40, 22 | duration: 1, 23 | color: Colors.Purple 24 | } 25 | 26 | 27 | const SphereLoader = (props: SphereProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | color, 35 | } = props; 36 | 37 | const SphereAnim = keyframes` 38 | 0%, 66% { 39 | border-left: 0px ${color ? `${color}` : `${dProps.color}`} solid; 40 | border-right: 0px ${color ? `${color}` : `${dProps.color}`} solid; 41 | } 42 | 33% { 43 | border-left: 32px ${color ? `${color}` : `${dProps.color}`} solid; 44 | border-right: 0px ${color ? `${color}` : `${dProps.color}`} solid; 45 | } 46 | 33.00001% { 47 | border-left: 0px ${color ? `${color}` : `${dProps.color}`} solid; 48 | border-right: 32px ${color ? `${color}` : `${dProps.color}`} solid; 49 | } 50 | `; 51 | 52 | const Sphere = styled('div')` 53 | width: inherit; 54 | height: inherit; 55 | border-radius: 50%; 56 | border-left: 0px ${color ? `${color}` : `${dProps.color}`} solid; 57 | border-right: 0px ${color ? `${color}` : `${dProps.color}`} solid; 58 | animation: ${SphereAnim} ${loaderDuration(duration, dProps.duration)} infinite linear; 59 | animation-play-state: ${pauseAnim(pause)}; 60 | `; 61 | 62 | return ( 63 | 64 | 65 | 66 | ) 67 | } 68 | 69 | export default SphereLoader; -------------------------------------------------------------------------------- /src/spinningCircle/SpinningCircleLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, convertToRgba } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface SpinningCircleLoaderProps { 12 | loading: boolean; 13 | colors?: string[]; 14 | pause?: boolean; 15 | size?: number; 16 | } 17 | 18 | const dProps = { 19 | loading: true, 20 | size: 50, 21 | colors: [Colors.Purple, '#fafafa'] 22 | } 23 | 24 | 25 | const SpinningCircleLoader = (props: SpinningCircleLoaderProps) => { 26 | 27 | const { 28 | loading, 29 | pause, 30 | size, 31 | colors, 32 | } = props; 33 | 34 | const rgbDefaultColor = convertToRgba(dProps.colors[0], 10); 35 | 36 | const SpinningCircleLoaderAnimation = keyframes` 37 | from { 38 | transform: rotate(0); 39 | } 40 | to{ 41 | transform: rotate(359deg); 42 | } 43 | `; 44 | 45 | const CircleBorder = styled('div')` 46 | width: inherit; 47 | height: inherit; 48 | padding: 3px; 49 | display: flex; 50 | justify-content: center; 51 | align-items: center; 52 | border-radius: 50%; 53 | background: ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 54 | background: ${colors ? `linear-gradient(0deg, ${convertToRgba(colors[0], 10)} 33%, ${colors[0]} 100%)` : `linear-gradient(0deg, ${rgbDefaultColor} 33%, ${dProps.colors[0]} 100%)`}; 55 | animation: ${SpinningCircleLoaderAnimation} .8s linear 0s infinite; 56 | animation-play-state: ${pause ? 'paused' : 'running'}; 57 | `; 58 | 59 | const CircleCore = styled('div')` 60 | width: inherit; 61 | height: inherit; 62 | background-color: ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 63 | border-radius: 50%; 64 | `; 65 | 66 | return ( 67 | 68 | 69 | 70 | 71 | 72 | ) 73 | } 74 | 75 | 76 | export default SpinningCircleLoader; -------------------------------------------------------------------------------- /src/spinningOrbit/SpinningOrbitLoader.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | 3 | import React from 'react'; 4 | import styled from '@emotion/styled'; 5 | import { keyframes, css, jsx } from '@emotion/core'; 6 | import { Colors } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface SpinningOrbitProps { 12 | loading: boolean; 13 | pause?: boolean; 14 | size?: number; 15 | colors?: string[]; 16 | } 17 | 18 | const dProps = { 19 | loading: true, 20 | size: 50, 21 | colors: [Colors.Purple, Colors.Purple, Colors.Purple, Colors.Purple] 22 | } 23 | 24 | 25 | const SpinningOrbitLoader = (props: SpinningOrbitProps) => { 26 | 27 | const { 28 | loading, 29 | size, 30 | colors, 31 | pause 32 | } = props; 33 | 34 | const Spin3DAnimation = keyframes` 35 | from { 36 | transform: rotate3d(.5,.5,.5, 360deg); 37 | } 38 | to{ 39 | transform: rotate3d(0deg); 40 | } 41 | `; 42 | 43 | const Leo= css` 44 | position: absolute; 45 | display: flex; 46 | justify-content: center; 47 | align-items: center; 48 | border-radius: 50%; 49 | `; 50 | 51 | const Orbit1 = styled('div')` 52 | width: inherit; 53 | height: inherit; 54 | border: ${colors ? `1px solid ${colors[0]}` : `1px solid ${dProps.colors[0]}`}; 55 | animation: ${Spin3DAnimation} 3s linear .2s infinite; 56 | animation-play-state: ${pause ? 'paused' : 'running'}; 57 | `; 58 | 59 | const Orbit2 = styled('div')` 60 | width: 73%; 61 | height: 73%; 62 | border: ${colors ? `1px solid ${colors[1]}` : `1px solid ${dProps.colors[1]}`}; 63 | animation: ${Spin3DAnimation} 2s linear 0s infinite; 64 | animation-play-state: ${pause ? 'paused' : 'running'}; 65 | `; 66 | 67 | const Orbit3 = styled('div')` 68 | width: 55%; 69 | height: 55%; 70 | border: ${colors ? `1px solid ${colors[2]}` : `1px solid ${dProps.colors[2]}`}; 71 | animation: ${Spin3DAnimation} 1s linear 0s infinite; 72 | animation-play-state: ${pause ? 'paused' : 'running'}; 73 | `; 74 | 75 | const Orbit4 = styled('div')` 76 | width: 40%; 77 | height: 40%; 78 | border: ${colors ? `1px solid ${colors[3]}` : `1px solid ${dProps.colors[3]}`}; 79 | animation: ${Spin3DAnimation} 10s linear 0s infinite; 80 | animation-play-state: ${pause ? 'paused' : 'running'}; 81 | `; 82 | 83 | const W1= css` 84 | transform: rotate3D(1, 1, 1, 90deg) 85 | `; 86 | 87 | const W2= css` 88 | transform: rotate3D(1, 2, .5, 90deg) 89 | `; 90 | 91 | const W3= css` 92 | transform: rotate3D(.5, 1, 2, 90deg) 93 | `; 94 | 95 | 96 | return ( 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | ) 106 | } 107 | 108 | 109 | export default SpinningOrbitLoader; 110 | 111 | 112 | -------------------------------------------------------------------------------- /src/texture/TextureLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface TextureProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | color?: string; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 40, 22 | duration: .7, 23 | color: Colors.Purple 24 | } 25 | 26 | 27 | const TextureLoader = (props: TextureProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | color, 35 | } = props; 36 | 37 | const TextureAnim = keyframes` 38 | from { background-position: 0px 0px; } 39 | to { background-position: -16px 0px; } 40 | `; 41 | 42 | const Texture = styled('div')` 43 | width: inherit; 44 | height: inherit; 45 | border: 1px ${color ? `${color}` : `${dProps.color}`} solid; 46 | border-radius: 4px; 47 | position: relative; 48 | background: linear-gradient(45deg, transparent 49%, ${color ? `${color}` : `${dProps.color}`} 50%, ${color ? `${color}` : `${dProps.color}`} 50%, transparent 51%, transparent), 49 | linear-gradient(-45deg, transparent 49%, ${color ? `${color}` : `${dProps.color}`} 50%, ${color ? `${color}` : `${dProps.color}`} 50%, transparent 51%, transparent); 50 | background-size: 16px 16px; 51 | background-position: 0% 0%; 52 | animation: ${TextureAnim} ${loaderDuration(duration, dProps.duration)} infinite linear; 53 | animation-play-state: ${pauseAnim(pause)}; 54 | `; 55 | 56 | return ( 57 | 58 | 59 | 60 | ) 61 | } 62 | 63 | export default TextureLoader; -------------------------------------------------------------------------------- /src/utilities/utilities.ts: -------------------------------------------------------------------------------- 1 | export enum Colors { 2 | Purple = '#5e22f0', 3 | Yellow = '#f6b93b', 4 | Pink = '#ef5777' 5 | } 6 | 7 | export const convertToRgba = (colorString: string, colorOpacity: number) => { 8 | colorString = colorString.replace('#',''); 9 | const r = parseInt(colorString.substring(0,2), 16); 10 | const g = parseInt(colorString.substring(2,4), 16); 11 | const b = parseInt(colorString.substring(4,6), 16); 12 | 13 | const result = 'rgba('+r+','+g+','+b+','+colorOpacity/100+')'; 14 | 15 | return result; 16 | } 17 | 18 | export const loaderDuration = (customDuration: number | undefined, defaultDuration: number) => { 19 | return `${customDuration ? customDuration : defaultDuration}s`; 20 | } 21 | 22 | export const loaderColor = (customColor: string | undefined, defaultColor: string) => { 23 | return `${customColor ? customColor : defaultColor}`; 24 | } 25 | 26 | export const pauseAnim = (pauseState: boolean | undefined) => { 27 | return `${pauseState ? 'paused' : 'running'}`; 28 | } 29 | 30 | export const lightenDarkenColor = (col: string, amt: number) => { 31 | 32 | var usePound = false; 33 | 34 | if (col[0] === "#") { 35 | col = col.slice(1); 36 | usePound = true; 37 | } 38 | 39 | var num = parseInt(col,16); 40 | 41 | var r = (num >> 16) + amt; 42 | 43 | if (r > 255) r = 255; 44 | else if (r < 0) r = 0; 45 | 46 | var b = ((num >> 8) & 0x00FF) + amt; 47 | 48 | if (b > 255) b = 255; 49 | else if (b < 0) b = 0; 50 | 51 | var g = (num & 0x0000FF) + amt; 52 | 53 | if (g > 255) g = 255; 54 | else if (g < 0) g = 0; 55 | 56 | return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); 57 | 58 | } -------------------------------------------------------------------------------- /src/volume/VolumeLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface VolumeProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | colors?: string[]; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 35, 22 | duration: .6, 23 | colors: [Colors.Purple, '#ffffff'] 24 | } 25 | 26 | 27 | const VolumeLoader = (props: VolumeProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | colors, 35 | } = props; 36 | 37 | const VolumeAnim = keyframes` 38 | from { 39 | transform: rotate(0deg); 40 | } 41 | to { 42 | transform: rotate(359deg); 43 | } 44 | `; 45 | 46 | const Volume = styled('div')` 47 | width: inherit; 48 | height: inherit; 49 | background-color: ${colors ? `${colors[0]}` : `${dProps.colors[0]}`}; 50 | border-radius: 100px; 51 | position: relative; 52 | animation: ${VolumeAnim} ${loaderDuration(duration, dProps.duration)} infinite linear; 53 | animation-play-state: ${pauseAnim(pause)}; 54 | 55 | &:after { 56 | margin: 1px; 57 | content: ''; 58 | border-radius: 100px; 59 | position: absolute; 60 | display: block; 61 | width: 10px; 62 | height: 10px; 63 | left: 5px; 64 | top: 5px; 65 | background-color: ${colors ? `${colors[1]}` : `${dProps.colors[1]}`}; 66 | } 67 | 68 | `; 69 | 70 | return ( 71 | 72 | 73 | 74 | ) 75 | } 76 | 77 | export default VolumeLoader; -------------------------------------------------------------------------------- /src/vortex/VortexLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface VortexProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | colors?: string[]; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 40, 22 | duration: 2, 23 | colors: [Colors.Purple, Colors.Purple] 24 | } 25 | 26 | 27 | const VortexLoader = (props: VortexProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | colors, 35 | } = props; 36 | 37 | const VortexAnim = keyframes` 38 | from { 39 | transform: rotate(0deg); 40 | } 41 | to { 42 | transform: rotate(359deg); 43 | } 44 | `; 45 | 46 | const Vortex = styled('div')` 47 | width: inherit; 48 | height: inherit; 49 | border: 1px ${colors ? `${colors[0]}` : `${dProps.colors[0]}`} solid; 50 | border-radius: 4px; 51 | overflow: hidden; 52 | position: relative; 53 | 54 | &:before, &:after { 55 | content: ''; 56 | border-radius: 50%; 57 | position: absolute; 58 | width: inherit; 59 | height: inherit; 60 | animation: ${VortexAnim} ${loaderDuration(duration, dProps.duration)} infinite linear; 61 | animation-play-state: ${pauseAnim(pause)}; 62 | } 63 | 64 | &:before { 65 | border-top: 15px ${colors ? `${colors[1]}` : `${dProps.colors[1]}`} solid; 66 | top: -3px; 67 | left: calc( -51% - 3px ); 68 | transform-origin: right center; 69 | } 70 | 71 | &:after { 72 | border-bottom: 15px ${colors ? `${colors[1]}` : `${dProps.colors[1]}`} solid; 73 | top: 3px; 74 | right: calc( -50% - 3px ); 75 | transform-origin: left center; 76 | } 77 | 78 | `; 79 | 80 | return ( 81 | 82 | 83 | 84 | ) 85 | } 86 | 87 | export default VortexLoader; -------------------------------------------------------------------------------- /src/wave/WaveLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import styled from '@emotion/styled'; 4 | import { keyframes } from '@emotion/core'; 5 | 6 | import { Colors, pauseAnim, loaderDuration } from '../utilities/utilities'; 7 | import LoaderBox from '../wrapper/wrapper'; 8 | 9 | 10 | 11 | export interface WaveProps { 12 | loading: boolean; 13 | size?: number; 14 | pause?: boolean; 15 | duration?: number; 16 | color?: string; 17 | } 18 | 19 | const dProps = { 20 | loading: true, 21 | size: 40, 22 | duration: 0.6, 23 | color: Colors.Purple 24 | } 25 | 26 | 27 | const WaveLoader = (props: WaveProps) => { 28 | 29 | const { 30 | loading, 31 | size, 32 | pause, 33 | duration, 34 | color, 35 | } = props; 36 | 37 | const WaveAf = keyframes` 38 | from { transform: scale(0.5,0.5); opacity: 0; } 39 | to { transform: scale(1,1); opacity: 1; } 40 | `; 41 | 42 | const WaveBf = keyframes` 43 | from { transform: scale(1,1); opacity: 1; } 44 | to { transform: scale(1.5,1.5); opacity: 0; } 45 | `; 46 | 47 | const Wave = styled('div')` 48 | width: inherit; 49 | height: inherit; 50 | border-radius: 50%; 51 | position: relative; 52 | opacity: 1; 53 | 54 | &:before, &:after { 55 | content:''; 56 | border: 1px ${color ? color : dProps.color} solid; 57 | border-radius: 50%; 58 | width: 100%; 59 | height: 100%; 60 | position: absolute; 61 | left:0px; 62 | } 63 | 64 | &:before { 65 | transform: scale(1,1); 66 | opacity: 1; 67 | animation: ${WaveBf} ${loaderDuration(duration, dProps.duration)} infinite linear; 68 | animation-play-state: ${pauseAnim(pause)}; 69 | } 70 | 71 | &:after { 72 | transform: scale(0,0); 73 | opacity: 0; 74 | animation: ${WaveAf} ${loaderDuration(duration, dProps.duration)} infinite linear; 75 | animation-play-state: ${pauseAnim(pause)}; 76 | } 77 | 78 | `; 79 | 80 | return ( 81 | 82 | 83 | 84 | ) 85 | } 86 | 87 | export default WaveLoader; -------------------------------------------------------------------------------- /src/wrapper/wrapper.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from 'react'; 2 | import styled from '@emotion/styled'; 3 | 4 | 5 | export interface WrapperProps { 6 | size: number | undefined; 7 | loading: boolean | undefined; 8 | dPropsSize: number; 9 | children: ReactNode; 10 | } 11 | 12 | 13 | const LoaderBox = (props: WrapperProps) => { 14 | const LoaderBox = styled('div')` 15 | width: ${props.size ? `${props.size}px` : `${props.dPropsSize}px`}; 16 | height: ${props.size ? `${props.size}px` : `${props.dPropsSize}px`}; 17 | display: ${props.loading ? 'flex' : 'none'}; 18 | justify-content: center; 19 | align-items: center; 20 | background-color: transparent; 21 | position: relative; 22 | `; 23 | 24 | return ( 25 | 26 | {props.children} 27 | 28 | ) 29 | } 30 | 31 | export default LoaderBox; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": false, 4 | "strictNullChecks": true, 5 | "module": "commonjs", 6 | "jsx": "react", 7 | "target": "es5", 8 | "moduleResolution": "node", 9 | "experimentalDecorators": true, 10 | "esModuleInterop": true, 11 | "declaration": true, 12 | "lib": ["dom", "es2017", "es5", "es6", "es7"], 13 | "outDir": "./lib", 14 | "strict": true 15 | }, 16 | "include": ["src"], 17 | "exclude": ["node_modules", "**/__tests__/*"] 18 | } 19 | --------------------------------------------------------------------------------