Repository: bondz/react-epic-spinners
Branch: main
Commit: 738ba8d50f1f
Files: 38
Total size: 67.4 KB

Directory structure:
gitextract_myqrtnp6/

├── .github/
│   ├── FUNDING.yml
│   └── workflows/
│       ├── ci.yml
│       ├── codeql-analysis.yml
│       ├── dispatch.yaml
│       ├── publish.yaml
│       └── release.yaml
├── .gitignore
├── .prettierrc
├── .vite-hooks/
│   └── pre-commit
├── .yarnrc.yml
├── LICENSE
├── README.md
├── package.json
├── renovate.json
├── src/
│   ├── components/
│   │   ├── AtomSpinner.tsx
│   │   ├── BreedingRhombusSpinner.tsx
│   │   ├── CirclesToRhombusesSpinner.tsx
│   │   ├── FingerprintSpinner.tsx
│   │   ├── FlowerSpinner.tsx
│   │   ├── FulfillingBouncingCircleSpinner.tsx
│   │   ├── FulfillingSquareSpinner.tsx
│   │   ├── HalfCircleSpinner.tsx
│   │   ├── HollowDotsSpinner.tsx
│   │   ├── IntersectingCirclesSpinner.tsx
│   │   ├── LoopingRhombusesSpinner.tsx
│   │   ├── OrbitSpinner.tsx
│   │   ├── PixelSpinner.tsx
│   │   ├── RadarSpinner.tsx
│   │   ├── ScalingSquaresSpinner.tsx
│   │   ├── SelfBuildingSquareSpinner.tsx
│   │   ├── SemipolarSpinner.tsx
│   │   ├── SpringSpinner.tsx
│   │   ├── SwappingSquaresSpinner.tsx
│   │   └── TrinityRingsSpinner.tsx
│   ├── index.ts
│   └── types.ts
├── tsconfig.json
└── vite.config.ts

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms

github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: bondz # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: ["https://venmo.com/u/lovebondz"]


================================================
FILE: .github/workflows/ci.yml
================================================
name: CI

on:
  pull_request:
    branches:
      - main

jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6

      - uses: voidzero-dev/setup-vp@v1
        with:
          node-version: "22"
          cache: true

      - run: vp install
      - run: vp check
      - run: vp pack


================================================
FILE: .github/workflows/codeql-analysis.yml
================================================
name: CodeQL

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  schedule:
    - cron: "0 13 * * 1"

jobs:
  analyse:
    name: Analyse
    runs-on: ubuntu-latest

    permissions:
      security-events: write

    steps:
      - name: Checkout repository
        uses: actions/checkout@v6

      - name: Initialize CodeQL
        uses: github/codeql-action/init@v4
        with:
          languages: javascript-typescript

      - name: Autobuild
        uses: github/codeql-action/autobuild@v4

      - name: Perform CodeQL Analysis
        uses: github/codeql-action/analyze@v4


================================================
FILE: .github/workflows/dispatch.yaml
================================================
name: Slash Command Dispatch

on:
  issue_comment:
    types: [created]

permissions:
  issues: write
  pull-requests: write
  actions: write
  contents: write

jobs:
  dispatch:
    runs-on: ubuntu-latest
    steps:
      - uses: peter-evans/slash-command-dispatch@v5
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          commands: |
            release
          permission: write


================================================
FILE: .github/workflows/publish.yaml
================================================
name: Publish react-epic-spinners

on:
  pull_request:
    types: [closed]
    branches:
      - main

jobs:
  build:
    if: |
      github.event.pull_request.merged == true &&
      contains(github.event.pull_request.labels.*.name, 'release')
    runs-on: ubuntu-latest
    outputs:
      version: ${{ steps.version.outputs.version }}
    permissions:
      contents: read
    steps:
      - uses: actions/checkout@v6

      - uses: voidzero-dev/setup-vp@v1
        with:
          node-version: "24"
          cache: true

      - run: vp install
      - run: vp pack

      - name: Extract version
        id: version
        run: |
          VERSION=$(jq -r .version package.json)
          echo "version=$VERSION" >> $GITHUB_OUTPUT

  publish-npm:
    needs: build
    runs-on: ubuntu-latest
    environment: Publish
    permissions:
      contents: read
      id-token: write
    steps:
      - uses: actions/checkout@v6

      - uses: voidzero-dev/setup-vp@v1
        with:
          node-version: "24"
          cache: true

      - run: vp install
      - run: vp pack

      - uses: actions/setup-node@v6
        with:
          node-version: lts/*
          registry-url: "https://registry.npmjs.org"

      - name: Publish to npm
        run: npm publish --provenance --access public --ignore-scripts

  create-release:
    needs: [build, publish-npm]
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v6

      - name: Create GitHub Release
        uses: softprops/action-gh-release@v2
        with:
          tag_name: v${{ needs.build.outputs.version }}
          name: Release v${{ needs.build.outputs.version }}
          generate_release_notes: true
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}


================================================
FILE: .github/workflows/release.yaml
================================================
name: Create Release PR

on:
  repository_dispatch:
    types: [release-command]

permissions:
  contents: write
  pull-requests: write

jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout main
        uses: actions/checkout@v6
        with:
          ref: main

      - name: Extract version
        run: |
          CURRENT_VERSION=$(jq -r .version package.json)
          IFS='.' read -ra VERSION_PARTS <<< "$CURRENT_VERSION"
          MAJOR=${VERSION_PARTS[0]}
          MINOR=${VERSION_PARTS[1]}
          PATCH=${VERSION_PARTS[2]}

          NAMED_VERSION="${{ github.event.client_payload.slash_command.args.named.version }}"
          RAW_ARGS="${{ github.event.client_payload.slash_command.args.all }}"
          RAW_ARGS=$(echo "$RAW_ARGS" | tr '[:upper:]' '[:lower:]')

          if [[ -n "$NAMED_VERSION" ]]; then
            VERSION="$NAMED_VERSION"
          elif [[ "$RAW_ARGS" == "patch" ]]; then
            PATCH=$((PATCH + 1))
          elif [[ "$RAW_ARGS" == "minor" ]]; then
            MINOR=$((MINOR + 1))
            PATCH=0
          elif [[ "$RAW_ARGS" == "major" ]]; then
            MAJOR=$((MAJOR + 1))
            MINOR=0
            PATCH=0
          else
            echo "Invalid release argument: '$RAW_ARGS'"
            exit 1
          fi

          if [[ -z "$VERSION" ]]; then
            VERSION="$MAJOR.$MINOR.$PATCH"
          fi

          echo "VERSION=$VERSION" >> $GITHUB_ENV

      - name: Bump version
        run: |
          npm version $VERSION --allow-same-version --no-git-tag-version --no-commit-hooks

      - name: Create PR
        uses: peter-evans/create-pull-request@v8
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          base: main
          branch: release-v${{ env.VERSION }}
          title: "Release v${{ env.VERSION }}"
          body: "Automated release triggered by slash command"
          author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
          committer: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
          labels: "release"


================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
package-lock.json
.rpt2_cache
*.log
dist
.vscode


================================================
FILE: .prettierrc
================================================
{
  "singleQuote": true
}


================================================
FILE: .vite-hooks/pre-commit
================================================
vp staged


================================================
FILE: .yarnrc.yml
================================================
nodeLinker: node-modules


================================================
FILE: LICENSE
================================================
The MIT License

Copyright (c) Bond Akinmade

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.


================================================
FILE: README.md
================================================
# React Epic Spinners

<p align="center">
  <a href="https://www.npmjs.com/package/react-epic-spinners">
    <img src="https://img.shields.io/npm/v/react-epic-spinners.svg" alt="npm version" />
  </a>
  <a href="https://github.com/bondz/react-epic-spinners/blob/master/LICENSE.md">
    <img src="https://img.shields.io/npm/l/react-epic-spinners.svg" alt="license" />
  </a>
  <a href="https://snyk.io/test/github/bondz/react-epic-spinners">
    <img src="https://snyk.io/test/github/bondz/react-epic-spinners/badge.svg" alt="Vulnerability status" />
  </a>
</p>

This library is the React implementation of Vue [epic-spinners](http://epic-spinners.epicmax.co/) by [EpicMax](https://github.com/epicmaxco/epic-spinners)

[Epic Spinners with Bit](https://bitsrc.io/bondz/react-epic-spinners) - Disocver, play and install spinners.
![scope preview](https://storage.googleapis.com/bit-assets/epic_spinners.png)

## Installation

Using NPM

```bash
npm install react-epic-spinners
```

Or Yarn

```bash
yarn add react-epic-spinners
```

## Demo

An online demo is available [here](https://bondz.github.io/react-epic-spinners/)

## Usage

All components accept the following props

- `size` `[number]`: (optional) specifies how large the spinner should be rendered
- `color` `[string]`: (optional) defaults to `#fff`. Specifies the color of the spinner.
- `animationDelay` `[number]`: (optional) specifies the timing of the spinner animation. Lower numbers mean the animations restart faster.
- `className` `[string]`: (optional) add any additional class you want to the component
- `style` `[object]`: (optional) a react component style object to additionally style the component

### Examples

```jsx
import { AtomSpinner } from 'react-epic-spinners'

// In your render function or SFC return
<AtomSpinner color="red">
```

## Components

> All components are named exports of the package.

```jsx
import { ... } from 'react-epic-spinners'
```

- [AtomSpinner](/src/components/AtomSpinner.js)
- [BreedingRhombusSpinner](/src/components/BreedingRhombusSpinner.js)
- [CirclesToRhombusesSpinner](/src/components/CirclesToRhombusesSpinner.js)
- [FingerprintSpinner](/src/components/FingerprintSpinner.js)
- [FlowerSpinner](/src/components/FlowerSpinner.js)
- [FulfillingBouncingCircleSpinner](/src/components/FulfillingBouncingCircleSpinner.js)
- [FulfillingSquareSpinner](/src/components/FulfillingSquareSpinner.js)
- [HalfCircleSpinner](/src/components/HalfCircleSpinner.js)
- [HollowDotsSpinner](/src/components/HollowDotsSpinner.js)
- [IntersectingCirclesSpinner](/src/components/IntersectingCirclesSpinner.js)
- [LoopingRhombusesSpinner](/src/components/LoopingRhombusesSpinner.js)
- [OrbitSpinner](/src/components/OrbitSpinner.js)
- [PixelSpinner](/src/components/PixelSpinner.js)
- [RadarSpinner](/src/components/RadarSpinner.js)
- [ScalingSquaresSpinner](/src/components/ScalingSquaresSpinner.js)
- [SelfBuildingSquareSpinner](/src/components/SelfBuildingSquareSpinner.js)
- [SemipolarSpinner](/src/components/SemipolarSpinner.js)
- [SpringSpinner](/src/components/SpringSpinner.js)
- [SwappingSquaresSpinner](/src/components/SwappingSquaresSpinner.js)
- [TrinityRingsSpinner](/src/components/TrinityRingsSpinner.js)

### Known Issues

Because of some bugs with `flexbox` on Firefox, the following components may not render properly

- ScalingSquaresSpinner
- SwappingSquaresSpinner
- TrinityRingsSpinner

If you know a fix for it, please send a PR :)

## License

[MIT](LICENSE).


================================================
FILE: package.json
================================================
{
  "name": "react-epic-spinners",
  "version": "0.6.0",
  "description": "Reusable react implementation of epic-spinners using styled-components",
  "keywords": [
    "epic spinners",
    "react",
    "spinners"
  ],
  "license": "MIT",
  "author": "Bond",
  "repository": {
    "type": "git",
    "url": "https://github.com/bondz/react-epic-spinners"
  },
  "files": [
    "dist"
  ],
  "type": "module",
  "sideEffects": false,
  "main": "dist/index.cjs",
  "module": "dist/index.mjs",
  "types": "./dist/index.d.mts",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.mts",
        "default": "./dist/index.mjs"
      },
      "require": {
        "types": "./dist/index.d.cts",
        "default": "./dist/index.cjs"
      }
    }
  },
  "scripts": {
    "prepare": "vp config"
  },
  "dependencies": {
    "styled-components": ">=2.4.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/styled-components": "^5.1.36",
    "prop-types": "^15.7.2",
    "react": "18.3.1",
    "react-dom": "^18.0.0",
    "typescript": "^5.9.3",
    "vite-plus": "latest"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "resolutions": {
    "react": "18.3.1",
    "vite": "npm:@voidzero-dev/vite-plus-core@latest",
    "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
  },
  "packageManager": "yarn@4.13.0"
}


================================================
FILE: renovate.json
================================================
{
  "extends": ["config:base"]
}


================================================
FILE: src/components/AtomSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const Atom = styled.div<EpicSpinnerProps>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  overflow: hidden;

  * {
    box-sizing: border-box;
  }

  .spinner-inner {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
  }

  .spinner-circle {
    display: block;
    position: absolute;
    color: ${(props) => props.color!};
    font-size: calc(${(props) => props.size!}px * 0.24);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .spinner-line {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation-duration: ${(props) => props.animationDuration!}ms;
    border-left-width: calc(${(props) => props.size!}px / 25);
    border-top-width: calc(${(props) => props.size!}px / 25);
    border-left-color: ${(props) => props.color!};
    border-left-style: solid;
    border-top-style: solid;
    border-top-color: transparent;
  }

  .spinner-line:nth-child(1) {
    animation: atom-spinner-animation-1 ${(props) => props.animationDuration!}ms linear infinite;
    transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
  }

  .spinner-line:nth-child(2) {
    animation: atom-spinner-animation-2 ${(props) => props.animationDuration!}ms linear infinite;
    transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
  }

  .spinner-line:nth-child(3) {
    animation: atom-spinner-animation-3 ${(props) => props.animationDuration!}ms linear infinite;
    transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
  }

  @keyframes atom-spinner-animation-1 {
    100% {
      transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
    }
  }
  @keyframes atom-spinner-animation-2 {
    100% {
      transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
    }
  }
  @keyframes atom-spinner-animation-3 {
    100% {
      transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
    }
  }
`;

export function AtomSpinner({
  size = 60,
  animationDuration = 1000,
  color = "#fff",
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  return (
    <Atom
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`atom-spinner${className ? " " + className : ""}`}
      style={style}
      {...props}
    >
      <div className="spinner-inner">
        <div className="spinner-line" />
        <div className="spinner-line" />
        <div className="spinner-line" />
        {/* Chrome renders little circles malformed */}
        <div className="spinner-circle">&#9679;</div>
      </div>
    </Atom>
  );
}

export default AtomSpinner;


================================================
FILE: src/components/BreedingRhombusSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const BreedingSpinner = styled.div<EpicSpinnerProps & { delayModifier: number }>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  position: relative;
  transform: rotate(45deg);

  * {
    box-sizing: border-box;
  }

  .rhombus {
    height: calc(${(props) => props.size!}px / 7.5);
    width: calc(${(props) => props.size!}px / 7.5);
    animation-duration: ${(props) => props.animationDuration!}ms;
    top: calc(${(props) => props.size!}px / 2.3077);
    left: calc(${(props) => props.size!}px / 2.3077);
    background-color: ${(props) => props.color!};
    position: absolute;
    animation-iteration-count: infinite;
  }

  .rhombus:nth-child(2n + 0) {
    margin-right: 0;
  }

  .rhombus.child-1 {
    animation-name: breeding-rhombus-spinner-animation-child-1;
    animation-delay: calc(${(props) => props.delayModifier}ms * 1);
  }

  .rhombus.child-2 {
    animation-name: breeding-rhombus-spinner-animation-child-2;
    animation-delay: calc(${(props) => props.delayModifier}ms * 2);
  }

  .rhombus.child-3 {
    animation-name: breeding-rhombus-spinner-animation-child-3;
    animation-delay: calc(${(props) => props.delayModifier}ms * 3);
  }

  .rhombus.child-4 {
    animation-name: breeding-rhombus-spinner-animation-child-4;
    animation-delay: calc(${(props) => props.delayModifier}ms * 4);
  }

  .rhombus.child-5 {
    animation-name: breeding-rhombus-spinner-animation-child-5;
    animation-delay: calc(${(props) => props.delayModifier}ms * 5);
  }

  .rhombus.child-6 {
    animation-name: breeding-rhombus-spinner-animation-child-6;
    animation-delay: calc(${(props) => props.delayModifier}ms * 6);
  }

  .rhombus.child-7 {
    animation-name: breeding-rhombus-spinner-animation-child-7;
    animation-delay: calc(${(props) => props.delayModifier}ms * 7);
  }

  .rhombus.child-8 {
    animation-name: breeding-rhombus-spinner-animation-child-8;
    animation-delay: calc(${(props) => props.delayModifier}ms * 8);
  }

  .rhombus.big {
    height: calc(${(props) => props.size!}px / 3);
    width: calc(${(props) => props.size!}px / 3);
    animation-duration: ${(props) => props.animationDuration!}ms;
    top: calc(${(props) => props.size!}px / 3);
    left: calc(${(props) => props.size!}px / 3);
    background-color: ${(props) => props.color!};
    animation: breeding-rhombus-spinner-animation-child-big ${(props) => props.animationDuration!}
      infinite;
    animation-delay: 0.5s;
  }

  @keyframes breeding-rhombus-spinner-animation-child-1 {
    50% {
      transform: translate(-325%, -325%);
    }
  }
  @keyframes breeding-rhombus-spinner-animation-child-2 {
    50% {
      transform: translate(0, -325%);
    }
  }
  @keyframes breeding-rhombus-spinner-animation-child-3 {
    50% {
      transform: translate(325%, -325%);
    }
  }
  @keyframes breeding-rhombus-spinner-animation-child-4 {
    50% {
      transform: translate(325%, 0);
    }
  }
  @keyframes breeding-rhombus-spinner-animation-child-5 {
    50% {
      transform: translate(325%, 325%);
    }
  }
  @keyframes breeding-rhombus-spinner-animation-child-6 {
    50% {
      transform: translate(0, 325%);
    }
  }
  @keyframes breeding-rhombus-spinner-animation-child-7 {
    50% {
      transform: translate(-325%, 325%);
    }
  }
  @keyframes breeding-rhombus-spinner-animation-child-8 {
    50% {
      transform: translate(-325%, 0);
    }
  }
  @keyframes breeding-rhombus-spinner-animation-child-big {
    50% {
      transform: scale(0.5);
    }
  }
`;

function generateRhombusChildren(num: number) {
  return Array.from({ length: num }).map((val, index) => (
    <div key={index} className={`rhombus child-${index + 1}`} />
  ));
}

function BreedingRhombusSpinner({
  size = 150,
  color = "#fff",
  animationDuration = 2000,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  return (
    <BreedingSpinner
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`breeding-rhombus-spinner${className ? " " + className : ""}`}
      style={style}
      delayModifier={animationDuration * 0.05}
      {...props}
    >
      {generateRhombusChildren(8)}
      <div className="rhombus big" />
    </BreedingSpinner>
  );
}

export default BreedingRhombusSpinner;


================================================
FILE: src/components/CirclesToRhombusesSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const CircleRhombus = styled.div<
  EpicSpinnerProps & { circleMarginLeft: number; circleNum: number; delay: number }
>`
  height: ${(props) => props.size}px;
  width: ${(props) => (props.size! + props.circleMarginLeft) * props.circleNum}px;
  display: flex;
  align-items: center;
  justify-content: center;

  * {
    box-sizing: border-box;
  }

  .circle {
    height: ${(props) => props.size}px;
    width: ${(props) => props.size}px;
    margin-left: ${(props) => props.circleMarginLeft}px;
    transform: rotate(45deg);
    border-radius: 10%;
    border: 3px solid ${(props) => props.color};
    overflow: hidden;
    background: transparent;
    animation: circles-to-rhombuses-animation ${(props) => props.animationDuration}ms linear
      infinite;
  }
  .circle:nth-child(1) {
    animation-delay: calc(${(props) => props.delay}ms * 1);
    margin-left: 0;
  }
  .circle:nth-child(2) {
    animation-delay: calc(${(props) => props.delay}ms * 2);
  }
  .circle:nth-child(3) {
    animation-delay: calc(${(props) => props.delay}ms * 3);
  }
  @keyframes circles-to-rhombuses-animation {
    0% {
      border-radius: 10%;
    }
    17.5% {
      border-radius: 10%;
    }
    50% {
      border-radius: 100%;
    }
    93.5% {
      border-radius: 10%;
    }
    100% {
      border-radius: 10%;
    }
  }
`;

function generateRhombusChildren(num: number) {
  return Array.from({ length: num }).map((val, index) => <div key={index} className="circle" />);
}

function CirclesToRhombusesSpinner({
  size = 15,
  color = "#fff",
  animationDuration = 1200,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  const circleMarginLeft = size * 1.125;
  const circleNum = 3;
  const delay = 150;

  return (
    <CircleRhombus
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`circles-to-rhombuses-spinner${className ? " " + className : ""}`}
      style={style}
      circleMarginLeft={circleMarginLeft}
      delay={delay}
      circleNum={circleNum}
      {...props}
    >
      {generateRhombusChildren(circleNum)}
    </CircleRhombus>
  );
}

export default CirclesToRhombusesSpinner;


================================================
FILE: src/components/FingerprintSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const RingSpinner = styled.div<EpicSpinnerProps & { ringBase: number; containerPadding: number }>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  padding: ${(props) => props.containerPadding}px;
  overflow: hidden;
  position: relative;

  * {
    box-sizing: border-box;
  }

  .spinner-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: ${(props) => props.color!};
    animation: fingerprint-spinner-animation ${(props) => props.animationDuration!}ms
      cubic-bezier(0.68, -0.75, 0.265, 1.75) infinite forwards;
    margin: auto;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
  }
  .spinner-ring:nth-child(1) {
    height: ${(props) => props.ringBase + 0 * props.ringBase}px;
    width: ${(props) => props.ringBase + 0 * props.ringBase}px;
    animation-delay: calc(50ms * 1);
  }
  .spinner-ring:nth-child(2) {
    height: ${(props) => props.ringBase + 1 * props.ringBase}px;
    width: ${(props) => props.ringBase + 1 * props.ringBase}px;
    animation-delay: calc(50ms * 2);
  }
  .spinner-ring:nth-child(3) {
    height: ${(props) => props.ringBase + 2 * props.ringBase}px;
    width: ${(props) => props.ringBase + 2 * props.ringBase}px;
    animation-delay: calc(50ms * 3);
  }
  .spinner-ring:nth-child(4) {
    height: ${(props) => props.ringBase + 3 * props.ringBase}px;
    width: ${(props) => props.ringBase + 3 * props.ringBase}px;
    animation-delay: calc(50ms * 4);
  }
  .spinner-ring:nth-child(5) {
    height: ${(props) => props.ringBase + 4 * props.ringBase}px;
    width: ${(props) => props.ringBase + 4 * props.ringBase}px;
    animation-delay: calc(50ms * 5);
  }
  .spinner-ring:nth-child(6) {
    height: ${(props) => props.ringBase + 5 * props.ringBase}px;
    width: ${(props) => props.ringBase + 5 * props.ringBase}px;
    animation-delay: calc(50ms * 6);
  }
  .spinner-ring:nth-child(7) {
    height: ${(props) => props.ringBase + 6 * props.ringBase}px;
    width: ${(props) => props.ringBase + 6 * props.ringBase}px;
    animation-delay: calc(50ms * 7);
  }
  .spinner-ring:nth-child(8) {
    height: ${(props) => props.ringBase + 7 * props.ringBase}px;
    width: ${(props) => props.ringBase + 7 * props.ringBase}px;
    animation-delay: calc(50ms * 8);
  }
  .spinner-ring:nth-child(9) {
    height: ${(props) => props.ringBase + 8 * props.ringBase}px;
    width: ${(props) => props.ringBase + 8 * props.ringBase}px;
    animation-delay: calc(50ms * 9);
  }

  @keyframes fingerprint-spinner-animation {
    100% {
      transform: rotate(360deg);
    }
  }
`;

function generateRings(num: number) {
  return Array.from({ length: num }).map((val, index) => (
    <div key={index} className="spinner-ring" />
  ));
}

function FingerprintSpinner({
  size = 60,
  color = "#fff",
  animationDuration = 1500,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  const ringsNum = 9;
  const containerPadding = 2;
  const outerRingSize = size - containerPadding * 2;
  const ringBase = outerRingSize / ringsNum;

  return (
    <RingSpinner
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`fingerprint-spinner${className ? " " + className : ""}`}
      style={style}
      ringBase={ringBase}
      containerPadding={containerPadding}
      {...props}
    >
      {generateRings(ringsNum)}
    </RingSpinner>
  );
}

export default FingerprintSpinner;


================================================
FILE: src/components/FlowerSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const Flower = styled.div<EpicSpinnerProps & { dotSize: number }>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  * {
    box-sizing: border-box;
  }

  .dots-container {
    height: ${(props) => props.dotSize}px;
    width: ${(props) => props.dotSize}px;
  }
  .smaller-dot {
    background: ${(props) => props.color!};
    height: 100%;
    width: 100%;
    border-radius: 50%;
    animation: flower-spinner-smaller-dot-animation ${(props) => props.animationDuration!}ms 0s
      infinite both;
  }
  .bigger-dot {
    background: ${(props) => props.color!};
    height: 100%;
    width: 100%;
    padding: 10%;
    border-radius: 50%;
    animation: flower-spinner-bigger-dot-animation ${(props) => props.animationDuration!}ms 0s
      infinite both;
  }
  @keyframes flower-spinner-bigger-dot-animation {
    0%,
    100% {
      box-shadow:
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!};
    }
    50% {
      transform: rotate(180deg);
    }
    25%,
    75% {
      box-shadow:
        ${(props) => props.dotSize * 2.6}px 0 0 ${(props) => props.color!},
        -${(props) => props.dotSize * 2.6}px 0 0 ${(props) => props.color!},
        0 ${(props) => props.dotSize * 2.6}px 0 ${(props) => props.color!},
        0 -${(props) => props.dotSize * 2.6}px 0 ${(props) => props.color!},
        ${(props) => props.dotSize * 1.9}px -${(props) => props.dotSize * 1.9}px 0
          ${(props) => props.color!},
        ${(props) => props.dotSize * 1.9}px ${(props) => props.dotSize * 1.9}px 0
          ${(props) => props.color!},
        -${(props) => props.dotSize * 1.9}px -${(props) => props.dotSize * 1.9}px 0
          ${(props) => props.color!},
        -${(props) => props.dotSize * 1.9}px ${(props) => props.dotSize * 1.9}px 0
          ${(props) => props.color!};
    }
    100% {
      transform: rotate(360deg);
      box-shadow:
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!};
    }
  }
  @keyframes flower-spinner-smaller-dot-animation {
    0%,
    100% {
      box-shadow:
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!};
    }
    25%,
    75% {
      box-shadow:
        ${(props) => props.dotSize * 1.4}px 0 0 ${(props) => props.color!},
        -${(props) => props.dotSize * 1.4}px 0 0 ${(props) => props.color!},
        0 ${(props) => props.dotSize * 1.4}px 0 ${(props) => props.color!},
        0 -${(props) => props.dotSize * 1.4}px 0 ${(props) => props.color!},
        ${(props) => props.dotSize}px -${(props) => props.dotSize}px 0 ${(props) => props.color!},
        ${(props) => props.dotSize}px ${(props) => props.dotSize}px 0 ${(props) => props.color!},
        -${(props) => props.dotSize}px -${(props) => props.dotSize}px 0 ${(props) => props.color!},
        -${(props) => props.dotSize}px ${(props) => props.dotSize}px 0 ${(props) => props.color!};
    }
    100% {
      box-shadow:
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!},
        0px 0px 0px ${(props) => props.color!};
    }
  }
`;

function FlowerSpinner({
  size = 70,
  color = "#fff",
  animationDuration = 2500,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  const dotSize = size / 7;

  return (
    <Flower
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`flower-spinner${className ? " " + className : ""}`}
      style={style}
      dotSize={dotSize}
      {...props}
    >
      <div className="dots-container">
        <div className="bigger-dot">
          <div className="smaller-dot" />
        </div>
      </div>
    </Flower>
  );
}

export default FlowerSpinner;


================================================
FILE: src/components/FulfillingBouncingCircleSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const BouncingCircle = styled.div<EpicSpinnerProps>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  position: relative;
  animation: fulfilling-bouncing-circle-spinner-animation infinite
    ${(props) => props.animationDuration!}ms ease;

  * {
    box-sizing: border-box;
  }

  .orbit {
    height: ${(props) => props.size!}px;
    width: ${(props) => props.size!}px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    border: calc(${(props) => props.size!}px * 0.03) solid ${(props) => props.color!};
    animation: fulfilling-bouncing-circle-spinner-orbit-animation infinite
      ${(props) => props.animationDuration!}ms ease;
  }
  .circle {
    height: ${(props) => props.size!}px;
    width: ${(props) => props.size!}px;
    color: ${(props) => props.color!};
    display: block;
    border-radius: 50%;
    position: relative;
    border: calc(${(props) => props.size!}px * 0.1) solid ${(props) => props.color!};
    animation: fulfilling-bouncing-circle-spinner-circle-animation infinite
      ${(props) => props.animationDuration!}ms ease;
    transform: rotate(0deg) scale(1);
  }
  @keyframes fulfilling-bouncing-circle-spinner-animation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes fulfilling-bouncing-circle-spinner-orbit-animation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1);
    }
    62.5% {
      transform: scale(0.8);
    }
    75% {
      transform: scale(1);
    }
    87.5% {
      transform: scale(0.8);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes fulfilling-bouncing-circle-spinner-circle-animation {
    0% {
      transform: scale(1);
      border-color: transparent;
      border-top-color: inherit;
    }
    16.7% {
      border-color: transparent;
      border-top-color: initial;
      border-right-color: initial;
    }
    33.4% {
      border-color: transparent;
      border-top-color: inherit;
      border-right-color: inherit;
      border-bottom-color: inherit;
    }
    50% {
      border-color: inherit;
      transform: scale(1);
    }
    62.5% {
      border-color: inherit;
      transform: scale(1.4);
    }
    75% {
      border-color: inherit;
      transform: scale(1);
      opacity: 1;
    }
    87.5% {
      border-color: inherit;
      transform: scale(1.4);
    }
    100% {
      border-color: transparent;
      border-top-color: inherit;
      transform: scale(1);
    }
  }
`;

function FulfillingBouncingCircleSpinner({
  size = 60,
  color = "#fff",
  animationDuration = 4000,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  return (
    <BouncingCircle
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`fulfilling-bouncing-circle-spinner${className ? " " + className : ""}`}
      style={style}
      {...props}
    >
      <div className="circle" />
      <div className="orbit" />
    </BouncingCircle>
  );
}

export default FulfillingBouncingCircleSpinner;


================================================
FILE: src/components/FulfillingSquareSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const SquareSpinner = styled.div<EpicSpinnerProps>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  position: relative;
  border: 4px solid ${(props) => props.color!};
  animation: fulfilling-square-spinner-animation ${(props) => props.animationDuration!}ms infinite
    ease;

  * {
    box-sizing: border-box;
  }

  .spinner-inner {
    vertical-align: top;
    display: inline-block;
    background-color: ${(props) => props.color!};
    width: 100%;
    opacity: 1;
    animation: fulfilling-square-spinner-inner-animation ${(props) => props.animationDuration!}ms
      infinite ease-in;
  }

  @keyframes fulfilling-square-spinner-animation {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(180deg);
    }
    50% {
      transform: rotate(180deg);
    }
    75% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes fulfilling-square-spinner-inner-animation {
    0% {
      height: 0%;
    }
    25% {
      height: 0%;
    }
    50% {
      height: 100%;
    }
    75% {
      height: 100%;
    }
    100% {
      height: 0%;
    }
  }
`;

function FulfillingSquareSpinner({
  size = 50,
  color = "#fff",
  animationDuration = 4000,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  return (
    <SquareSpinner
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`fulfilling-square-spinner${className ? " " + className : ""}`}
      style={style}
      {...props}
    >
      <div className="spinner-inner" />
    </SquareSpinner>
  );
}

export default FulfillingSquareSpinner;


================================================
FILE: src/components/HalfCircleSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const HalfSpinner = styled.div<EpicSpinnerProps>`
  width: ${(props) => props.size!}px;
  height: ${(props) => props.size!}px;
  border-radius: 100%;
  position: relative;

  * {
    box-sizing: border-box;
  }

  .circle {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: calc(${(props) => props.size!}px / 10) solid transparent;
  }
  .circle.circle-1 {
    border-top-color: ${(props) => props.color!};
    animation: half-circle-spinner-animation ${(props) => props.animationDuration!}ms infinite;
  }
  .circle.circle-2 {
    border-bottom-color: ${(props) => props.color!};
    animation: half-circle-spinner-animation ${(props) => props.animationDuration!}ms infinite
      alternate;
  }
  @keyframes half-circle-spinner-animation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`;

function HalfCircleSpinner({
  size = 60,
  color = "#fff",
  animationDuration = 1000,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  return (
    <HalfSpinner
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`half-circle-spinner${className ? " " + className : ""}`}
      style={style}
      {...props}
    >
      <div className="circle circle-1" />
      <div className="circle circle-2" />
    </HalfSpinner>
  );
}

export default HalfCircleSpinner;


================================================
FILE: src/components/HollowDotsSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const HollowSpinner = styled.div<EpicSpinnerProps & { animationDelay: number; dotsNum: number }>`
  height: ${(props) => props.size!}px;
  width: ${(props) => 2 * props.size! * props.dotsNum}px;

  * {
    box-sizing: border-box;
  }

  .dot {
    width: ${(props) => props.size!}px;
    height: ${(props) => props.size!}px;
    margin: 0 calc(${(props) => props.size!}px / 2);
    border: calc(${(props) => props.size!}px / 5) solid ${(props) => props.color!};
    border-radius: 50%;
    float: left;
    transform: scale(0);
    animation: hollow-dots-spinner-animation ${(props) => props.animationDuration!}ms ease infinite
      0ms;
  }
  .dot:nth-child(1) {
    animation-delay: calc(${(props) => props.animationDelay}ms * 1);
  }
  .dot:nth-child(2) {
    animation-delay: calc(${(props) => props.animationDelay}ms * 2);
  }
  .dot:nth-child(3) {
    animation-delay: calc(${(props) => props.animationDelay}ms * 3);
  }
  @keyframes hollow-dots-spinner-animation {
    50% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
`;

function generateDots(num: number) {
  return Array.from({ length: num }).map((val, index) => <div key={index} className="dot" />);
}

function HollowDotsSpinner({
  size = 15,
  color = "#fff",
  animationDuration = 1000,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  const dotsNum = 3;
  const animationDelay = animationDuration * 0.3;

  return (
    <HollowSpinner
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`hollow-dots-spinner${className ? " " + className : ""}`}
      style={style}
      dotsNum={dotsNum}
      animationDelay={animationDelay}
      {...props}
    >
      {generateDots(dotsNum)}
    </HollowSpinner>
  );
}

export default HollowDotsSpinner;


================================================
FILE: src/components/IntersectingCirclesSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const IntersectingCircles = styled.div<EpicSpinnerProps & { circleSize: number }>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  * {
    box-sizing: border-box;
  }

  .spinnerBlock {
    animation: intersecting-circles-spinners-animation ${(props) => props.animationDuration!}ms
      linear infinite;
    transform-origin: center;
    display: block;
    height: ${(props) => props.circleSize}px;
    width: ${(props) => props.circleSize}px;
  }
  .circle {
    display: block;
    border: 2px solid ${(props) => props.color!};
    border-radius: 50%;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .circle:nth-child(1) {
    left: 0;
    top: 0;
  }
  .circle:nth-child(2) {
    left: ${(props) => props.circleSize * -0.36}px;
    top: ${(props) => props.circleSize * 0.2}px;
  }
  .circle:nth-child(3) {
    left: ${(props) => props.circleSize * -0.36}px;
    top: ${(props) => props.circleSize * -0.2}px;
  }
  .circle:nth-child(4) {
    left: 0;
    top: ${(props) => props.circleSize * -0.36}px;
  }
  .circle:nth-child(5) {
    left: ${(props) => props.circleSize * 0.36}px;
    top: ${(props) => props.circleSize * -0.2}px;
  }
  .circle:nth-child(6) {
    left: ${(props) => props.circleSize * 0.36}px;
    top: ${(props) => props.circleSize * 0.2}px;
  }
  .circle:nth-child(7) {
    left: 0;
    top: ${(props) => props.circleSize * 0.36}px;
  }
  @keyframes intersecting-circles-spinners-animation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
`;

function generateCircles(num: number) {
  return Array.from({ length: num }).map((val, index) => <span key={index} className="circle" />);
}

function IntersectingCirclesSpinner({
  size = 70,
  color = "#fff",
  animationDuration = 1200,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  const circleSize = size / 2;

  return (
    <IntersectingCircles
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`intersecting-circles-spinner${className ? " " + className : ""}`}
      style={style}
      circleSize={circleSize}
      {...props}
    >
      <div className="spinnerBlock">{generateCircles(7)}</div>
    </IntersectingCircles>
  );
}

export default IntersectingCirclesSpinner;


================================================
FILE: src/components/LoopingRhombusesSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const LoadingRhombus = styled.div<EpicSpinnerProps>`
  width: ${(props) => props.size! * 4}px;
  height: ${(props) => props.size!}px;
  position: relative;

  * {
    box-sizing: border-box;
  }

  .rhombus {
    height: ${(props) => props.size!}px;
    width: ${(props) => props.size!}px;
    background-color: ${(props) => props.color!};
    left: ${(props) => props.size! * 4}px;
    position: absolute;
    margin: 0 auto;
    border-radius: 2px;
    transform: translateY(0) rotate(45deg) scale(0);
    animation: looping-rhombuses-spinner-animation ${(props) => props.animationDuration!}ms linear
      infinite;
  }
  .rhombus:nth-child(1) {
    animation-delay: calc(${(props) => props.animationDuration!}ms * 1 / -1.5);
  }
  .rhombus:nth-child(2) {
    animation-delay: calc(${(props) => props.animationDuration!}ms * 2 / -1.5);
  }
  .rhombus:nth-child(3) {
    animation-delay: calc(${(props) => props.animationDuration!}ms * 3 / -1.5);
  }
  @keyframes looping-rhombuses-spinner-animation {
    0% {
      transform: translateX(0) rotate(45deg) scale(0);
    }
    50% {
      transform: translateX(-233%) rotate(45deg) scale(1);
    }
    100% {
      transform: translateX(-466%) rotate(45deg) scale(0);
    }
  }
`;

function generateSpinners(num: number) {
  return Array.from({ length: num }).map((val, index) => <div key={index} className="rhombus" />);
}

function LoopingRhombusesSpinner({
  size = 15,
  color = "#fff",
  animationDuration = 2500,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  const num = 3;

  return (
    <LoadingRhombus
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`looping-rhombuses-spinner${className ? " " + className : ""}`}
      style={style}
      {...props}
    >
      {generateSpinners(num)}
    </LoadingRhombus>
  );
}

export default LoopingRhombusesSpinner;


================================================
FILE: src/components/OrbitSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const Orbit = styled.div<EpicSpinnerProps>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  border-radius: 50%;
  perspective: 800px;

  * {
    box-sizing: border-box;
  }

  .orbit {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .orbit:nth-child(1) {
    left: 0%;
    top: 0%;
    animation: orbit-spinner-orbit-one-animation ${(props) => props.animationDuration!}ms linear
      infinite;
    border-bottom: 3px solid ${(props) => props.color!};
  }
  .orbit:nth-child(2) {
    right: 0%;
    top: 0%;
    animation: orbit-spinner-orbit-two-animation ${(props) => props.animationDuration!}ms linear
      infinite;
    border-right: 3px solid ${(props) => props.color!};
  }
  .orbit:nth-child(3) {
    right: 0%;
    bottom: 0%;
    animation: orbit-spinner-orbit-three-animation ${(props) => props.animationDuration!}ms linear
      infinite;
    border-top: 3px solid ${(props) => props.color!};
  }
  @keyframes orbit-spinner-orbit-one-animation {
    0% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
  }
  @keyframes orbit-spinner-orbit-two-animation {
    0% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
  }
  @keyframes orbit-spinner-orbit-three-animation {
    0% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
  }
`;

function OrbitSpinner({
  size = 50,
  color = "#fff",
  animationDuration = 1000,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  return (
    <Orbit
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`orbit-spinner${className ? " " + className : ""}`}
      style={style}
      {...props}
    >
      <div className="orbit one" />
      <div className="orbit two" />
      <div className="orbit three" />
    </Orbit>
  );
}

export default OrbitSpinner;


================================================
FILE: src/components/PixelSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const Pixels = styled.div<EpicSpinnerProps & { pixelSize: number }>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  * {
    box-sizing: border-box;
  }

  .pixel-spinner-inner {
    width: ${(props) => props.pixelSize}px;
    height: ${(props) => props.pixelSize}px;
    background-color: ${(props) => props.color!};
    color: ${(props) => props.color!};

    box-shadow:
      ${(props) => props.pixelSize * 1.5}px ${(props) => props.pixelSize * 1.5}px 0 0,
      ${(props) => props.pixelSize * -1.5}px ${(props) => props.pixelSize * -1.5}px 0 0,
      ${(props) => props.pixelSize * 1.5}px ${(props) => props.pixelSize * -1.5}px 0 0,
      ${(props) => props.pixelSize * -1.5}px ${(props) => props.pixelSize * 1.5}px 0 0,
      0 ${(props) => props.pixelSize * 1.5}px 0 0,
      ${(props) => props.pixelSize * 1.5}px 0 0 0,
      ${(props) => props.pixelSize * -1.5}px 0 0 0,
      0 ${(props) => props.pixelSize * -1.5}px 0 0;
    animation: pixel-spinner-animation ${(props) => props.animationDuration!}ms linear infinite;
  }

  @keyframes pixel-spinner-animation {
    50% {
      box-shadow:
        ${(props) => props.pixelSize * 2}px ${(props) => props.pixelSize * 2}px 0 0,
        ${(props) => props.pixelSize * -2}px ${(props) => props.pixelSize * -2}px 0 0,
        ${(props) => props.pixelSize * 2}px ${(props) => props.pixelSize * -2}px 0 0,
        ${(props) => props.pixelSize * -2}px ${(props) => props.pixelSize * 2}px 0 0,
        0 ${(props) => props.pixelSize}px 0 0,
        ${(props) => props.pixelSize}px 0 0 0,
        ${(props) => props.pixelSize * -1}px 0 0 0,
        0 ${(props) => props.pixelSize * -1}px 0 0;
    }
    75% {
      box-shadow:
        ${(props) => props.pixelSize * 2}px ${(props) => props.pixelSize * 2}px 0 0,
        ${(props) => props.pixelSize * -2}px ${(props) => props.pixelSize * -2}px 0 0,
        ${(props) => props.pixelSize * 2}px ${(props) => props.pixelSize * -2}px 0 0,
        ${(props) => props.pixelSize * -2}px ${(props) => props.pixelSize * 2}px 0 0,
        0 ${(props) => props.pixelSize}px 0 0,
        ${(props) => props.pixelSize}px 0 0 0,
        ${(props) => props.pixelSize * -1}px 0 0 0,
        0 ${(props) => props.pixelSize * -1}px 0 0;
    }
    100% {
      transform: rotate(360deg);
    }
  }
`;

function PixelSpinner({
  size = 70,
  color = "#fff",
  animationDuration = 1500,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  const pixelSize = size / 7;

  return (
    <Pixels
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`pixel-spinner${className ? " " + className : ""}`}
      style={style}
      pixelSize={pixelSize}
      {...props}
    >
      <div className="pixel-spinner-inner" />
    </Pixels>
  );
}

export default PixelSpinner;


================================================
FILE: src/components/RadarSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const Radar = styled.div<EpicSpinnerProps & { borderWidth: number }>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  position: relative;

  * {
    box-sizing: border-box;
  }

  .circle {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    animation: radar-spinner-animation ${(props) => props.animationDuration!}ms infinite;
  }
  .circle:nth-child(1) {
    padding: ${(props) => props.borderWidth * 2 * 0}px;
    animation-delay: ${(props) => props.animationDuration! * 0.15}ms;
  }
  .circle:nth-child(2) {
    padding: ${(props) => props.borderWidth * 2 * 1}px;
    animation-delay: ${(props) => props.animationDuration! * 0.15}ms;
  }
  .circle:nth-child(3) {
    padding: ${(props) => props.borderWidth * 2 * 2}px;
    animation-delay: ${(props) => props.animationDuration! * 0.15}ms;
  }
  .circle:nth-child(4) {
    padding: ${(props) => props.borderWidth * 2 * 3}px;
    animation-delay: 0ms;
  }
  .circle-inner,
  .circle-inner-container {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: ${(props) => props.borderWidth}px solid transparent;
  }
  .circle-inner {
    border-left-color: ${(props) => props.color!};
    border-right-color: ${(props) => props.color!};
  }
  @keyframes radar-spinner-animation {
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
`;

function generateSpinners(num: number) {
  return Array.from({ length: num }).map((val, index) => (
    <div key={index} className="circle">
      <div className="circle-inner-container">
        <div className="circle-inner" />
      </div>
    </div>
  ));
}

function RadarSpinner({
  size = 110,
  color = "#fff",
  animationDuration = 2000,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  const borderWidth = (size * 5) / 110;

  return (
    <Radar
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`radar-spinner${className ? " " + className : ""}`}
      style={style}
      borderWidth={borderWidth}
      {...props}
    >
      {generateSpinners(4)}
    </Radar>
  );
}

export default RadarSpinner;


================================================
FILE: src/components/ScalingSquaresSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const ScalingSquares = styled.div<EpicSpinnerProps>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  animation: scaling-squares-animation ${(props) => props.animationDuration!}ms;
  animation-iteration-count: infinite;
  transform: rotate(0deg);

  * {
    box-sizing: border-box;
  }

  .square {
    height: calc(${(props) => props.size!}px * 0.25 / 1.3);
    width: calc(${(props) => props.size!}px * 0.25 / 1.3);
    margin-right: auto;
    margin-left: auto;
    border: calc(${(props) => props.size!}px * 0.04 / 1.3) solid ${(props) => props.color!};
    position: absolute;
    animation-duration: ${(props) => props.animationDuration!}ms;
    animation-iteration-count: infinite;
  }
  .square:nth-child(1) {
    animation-name: scaling-squares-spinner-animation-child-1;
  }
  .square:nth-child(2) {
    animation-name: scaling-squares-spinner-animation-child-2;
  }
  .square:nth-child(3) {
    animation-name: scaling-squares-spinner-animation-child-3;
  }
  .square:nth-child(4) {
    animation-name: scaling-squares-spinner-animation-child-4;
  }
  @keyframes scaling-squares-animation {
    50% {
      transform: rotate(90deg);
    }
    100% {
      transform: rotate(180deg);
    }
  }
  @keyframes scaling-squares-spinner-animation-child-1 {
    50% {
      transform: translate(150%, 150%) scale(2, 2);
    }
  }
  @keyframes scaling-squares-spinner-animation-child-2 {
    50% {
      transform: translate(-150%, 150%) scale(2, 2);
    }
  }
  @keyframes scaling-squares-spinner-animation-child-3 {
    50% {
      transform: translate(-150%, -150%) scale(2, 2);
    }
  }
  @keyframes scaling-squares-spinner-animation-child-4 {
    50% {
      transform: translate(150%, -150%) scale(2, 2);
    }
  }
`;

function generateSpinners(num: number) {
  return Array.from({ length: num }).map((val, index) => <div key={index} className="square" />);
}

function ScalingSquaresSpinner({
  size = 65,
  color = "#fff",
  animationDuration = 1250,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  return (
    <ScalingSquares
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`scaling-squares-spinner${className ? " " + className : ""}`}
      style={style}
      {...props}
    >
      {generateSpinners(4)}
    </ScalingSquares>
  );
}

export default ScalingSquaresSpinner;


================================================
FILE: src/components/SelfBuildingSquareSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const BuildingSquare = styled.div<EpicSpinnerProps & { initialTopPosition: number }>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  top: ${(props) => -1 * props.initialTopPosition}px;

  * {
    box-sizing: border-box;
  }

  .square {
    height: ${(props) => props.size! / 4}px;
    width: ${(props) => props.size! / 4}px;
    top: ${(props) => -1 * props.initialTopPosition}px;
    margin-right: calc(${(props) => props.size! / 4}px / 3);
    margin-top: calc(${(props) => props.size! / 4}px / 3);
    background: ${(props) => props.color!};
    float: left;
    position: relative;
    opacity: 0;
    animation: self-building-square-spinner ${(props) => props.animationDuration!}ms infinite;
  }
  .square:nth-child(1) {
    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 6);
  }
  .square:nth-child(2) {
    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 7);
  }
  .square:nth-child(3) {
    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 8);
  }
  .square:nth-child(4) {
    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 3);
  }
  .square:nth-child(5) {
    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 4);
  }
  .square:nth-child(6) {
    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 5);
  }
  .square:nth-child(7) {
    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 0);
  }
  .square:nth-child(8) {
    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 1);
  }
  .square:nth-child(9) {
    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 2);
  }
  .clear {
    clear: both;
  }
  @keyframes self-building-square-spinner {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
      top: 0;
    }
    50.9% {
      opacity: 1;
      top: 0;
    }
    55.9% {
      opacity: 0;
      top: inherit;
    }
  }
`;

function generateSpinners(num: number) {
  return Array.from({ length: num }).map((val, index) => (
    <div key={index} className={`square${index % 3 === 0 ? " clear" : ""}`} />
  ));
}

function SelfBuildingSquareSpinner({
  size = 40,
  color = "#fff",
  animationDuration = 6000,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  const initialTopPosition = size / 6;

  return (
    <BuildingSquare
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`self-building-square-spinner${className ? " " + className : ""}`}
      style={style}
      initialTopPosition={initialTopPosition}
      {...props}
    >
      {generateSpinners(9)}
    </BuildingSquare>
  );
}

export default SelfBuildingSquareSpinner;


================================================
FILE: src/components/SemipolarSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const Semipolar = styled.div<EpicSpinnerProps>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  position: relative;

  * {
    box-sizing: border-box;
  }

  .ring {
    border-radius: 50%;
    position: absolute;
    border: calc(${(props) => props.size!}px * 0.05) solid transparent;
    border-top-color: ${(props) => props.color!};
    border-left-color: ${(props) => props.color!};
    animation: semipolar-spinner-animation ${(props) => props.animationDuration!}ms infinite;
  }
  .ring:nth-child(1) {
    height: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 0);
    width: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 0);
    top: calc(${(props) => props.size!}px * 0.1 * 0);
    left: calc(${(props) => props.size!}px * 0.1 * 0);
    animation-delay: calc(${(props) => props.animationDuration!}ms * 0.1 * 4);
    z-index: 5;
  }
  .ring:nth-child(2) {
    height: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 1);
    width: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 1);
    top: calc(${(props) => props.size!}px * 0.1 * 1);
    left: calc(${(props) => props.size!}px * 0.1 * 1);
    animation-delay: calc(${(props) => props.animationDuration!}ms * 0.1 * 3);
    z-index: 4;
  }
  .ring:nth-child(3) {
    height: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 2);
    width: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 2);
    top: calc(${(props) => props.size!}px * 0.1 * 2);
    left: calc(${(props) => props.size!}px * 0.1 * 2);
    animation-delay: calc(${(props) => props.animationDuration!}ms * 0.1 * 2);
    z-index: 3;
  }
  .ring:nth-child(4) {
    height: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 3);
    width: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 3);
    top: calc(${(props) => props.size!}px * 0.1 * 3);
    left: calc(${(props) => props.size!}px * 0.1 * 3);
    animation-delay: calc(${(props) => props.animationDuration!}ms * 0.1 * 1);
    z-index: 2;
  }
  .ring:nth-child(5) {
    height: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 4);
    width: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 4);
    top: calc(${(props) => props.size!}px * 0.1 * 4);
    left: calc(${(props) => props.size!}px * 0.1 * 4);
    animation-delay: calc(${(props) => props.animationDuration!}ms * 0.1 * 0);
    z-index: 1;
  }
  @keyframes semipolar-spinner-animation {
    50% {
      transform: rotate(360deg) scale(0.7);
    }
  }
`;

function generateSpinners(num: number) {
  return Array.from({ length: num }).map((val, index) => <div key={index} className="ring" />);
}

function SemipolarSpinner({
  size = 65,
  color = "#fff",
  animationDuration = 2000,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  return (
    <Semipolar
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`semipolar-spinner${className ? " " + className : ""}`}
      style={style}
      {...props}
    >
      {generateSpinners(5)}
    </Semipolar>
  );
}

export default SemipolarSpinner;


================================================
FILE: src/components/SpringSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const Spring = styled.div<EpicSpinnerProps>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;

  * {
    box-sizing: border-box;
  }

  .spring-spinner-part {
    overflow: hidden;
    height: calc(${(props) => props.size!}px / 2);
    width: ${(props) => props.size!}px;
  }
  .spring-spinner-part.bottom {
    transform: rotate(180deg) scale(-1, 1);
  }
  .spring-spinner-rotator {
    width: ${(props) => props.size!}px;
    height: ${(props) => props.size!}px;
    border: calc(${(props) => props.size!}px / 7) solid transparent;
    border-right-color: ${(props) => props.color!};
    border-top-color: ${(props) => props.color!};
    border-radius: 50%;
    box-sizing: border-box;
    animation: spring-spinner-animation ${(props) => props.animationDuration!}ms ease-in-out
      infinite;
    transform: rotate(-200deg);
  }
  @keyframes spring-spinner-animation {
    0% {
      border-width: calc(${(props) => props.size!}px / 7);
    }
    25% {
      border-width: calc(${(props) => props.size!}px / 23.33);
    }
    50% {
      transform: rotate(115deg);
      border-width: calc(${(props) => props.size!}px / 7);
    }
    75% {
      border-width: calc(${(props) => props.size!}px / 23.33);
    }
    100% {
      border-width: calc(${(props) => props.size!}px / 7);
    }
  }
`;

function SpringSpinner({
  size = 70,
  color = "#fff",
  animationDuration = 3000,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  return (
    <Spring
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`spring-spinner${className ? " " + className : ""}`}
      style={style}
      {...props}
    >
      <div className="spring-spinner-part top">
        <div className="spring-spinner-rotator" />
      </div>
      <div className="spring-spinner-part bottom">
        <div className="spring-spinner-rotator" />
      </div>
    </Spring>
  );
}

export default SpringSpinner;


================================================
FILE: src/components/SwappingSquaresSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const SwappingSquare = styled.div<EpicSpinnerProps>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  * {
    box-sizing: border-box;
  }

  .square {
    height: calc(${(props) => props.size!}px * 0.25 / 1.3);
    width: calc(${(props) => props.size!}px * 0.25 / 1.3);
    animation-duration: ${(props) => props.animationDuration!}ms;
    border: calc(${(props) => props.size!}px * 0.04 / 1.3) solid ${(props) => props.color!};
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    animation-iteration-count: infinite;
  }
  .square:nth-child(1) {
    animation-name: swapping-squares-animation-child-1;
    animation-delay: ${(props) => props.animationDuration! * 0.5}ms;
  }
  .square:nth-child(2) {
    animation-name: swapping-squares-animation-child-2;
    animation-delay: 0ms;
  }
  .square:nth-child(3) {
    animation-name: swapping-squares-animation-child-3;
    animation-delay: ${(props) => props.animationDuration! * 0.5}ms;
  }
  .square:nth-child(4) {
    animation-name: swapping-squares-animation-child-4;
    animation-delay: 0ms;
  }
  @keyframes swapping-squares-animation-child-1 {
    50% {
      transform: translate(150%, 150%) scale(2, 2);
    }
  }
  @keyframes swapping-squares-animation-child-2 {
    50% {
      transform: translate(-150%, 150%) scale(2, 2);
    }
  }
  @keyframes swapping-squares-animation-child-3 {
    50% {
      transform: translate(-150%, -150%) scale(2, 2);
    }
  }
  @keyframes swapping-squares-animation-child-4 {
    50% {
      transform: translate(150%, -150%) scale(2, 2);
    }
  }
`;

function generateSpinners(num: number) {
  return Array.from({ length: num }).map((val, index) => <div key={index} className="square" />);
}

function SwappingSquaresSpinner({
  size = 65,
  color = "#fff",
  animationDuration = 1000,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  return (
    <SwappingSquare
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`swapping-squares-spinner${className ? " " + className : ""}`}
      style={style}
      {...props}
    >
      {generateSpinners(4)}
    </SwappingSquare>
  );
}

export default SwappingSquaresSpinner;


================================================
FILE: src/components/TrinityRingsSpinner.tsx
================================================
import type { EpicSpinnerProps } from "../types";
import styled from "styled-components";

const Trinity = styled.div<EpicSpinnerProps & { outerWidth: number }>`
  height: ${(props) => props.size!}px;
  width: ${(props) => props.size!}px;
  padding: 3px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  overflow: hidden;
  box-sizing: border-box;

  * {
    box-sizing: border-box;
  }

  .circle {
    position: absolute;
    display: block;
    border-radius: 50%;
    border: 3px solid ${(props) => props.color!};
    opacity: 1;
  }
  .circle:nth-child(1) {
    height: ${(props) => props.outerWidth}px;
    width: ${(props) => props.outerWidth}px;
    animation: trinity-rings-spinner-circle1-animation ${(props) => props.animationDuration!}ms
      infinite linear;
    border-width: 3px;
  }
  .circle:nth-child(2) {
    height: calc(${(props) => props.outerWidth}px * 0.65);
    width: calc(${(props) => props.outerWidth}px * 0.65);
    animation: trinity-rings-spinner-circle2-animation ${(props) => props.animationDuration!}ms
      infinite linear;
    border-width: 2px;
  }
  .circle:nth-child(3) {
    height: calc(${(props) => props.outerWidth}px * 0.1);
    width: calc(${(props) => props.outerWidth}px * 0.1);
    animation: trinity-rings-spinner-circle3-animation ${(props) => props.animationDuration!}ms
      infinite linear;
    border-width: 1px;
  }
  @keyframes trinity-rings-spinner-circle1-animation {
    0% {
      transform: rotateZ(20deg) rotateY(0deg);
    }
    100% {
      transform: rotateZ(100deg) rotateY(360deg);
    }
  }
  @keyframes trinity-rings-spinner-circle2-animation {
    0% {
      transform: rotateZ(100deg) rotateX(0deg);
    }
    100% {
      transform: rotateZ(0deg) rotateX(360deg);
    }
  }
  @keyframes trinity-rings-spinner-circle3-animation {
    0% {
      transform: rotateZ(100deg) rotateX(-360deg);
    }
    100% {
      transform: rotateZ(-360deg) rotateX(360deg);
    }
  }
`;

function TrinityRingsSpinner({
  size = 66,
  color = "#fff",
  animationDuration = 1500,
  className = "",
  style,
  ...props
}: EpicSpinnerProps) {
  const containerPadding = 3;
  const outerWidth = size - containerPadding * 2;

  return (
    <Trinity
      size={size}
      color={color}
      animationDuration={animationDuration}
      className={`trinity-rings-spinner${className ? " " + className : ""}`}
      style={style}
      outerWidth={outerWidth}
      {...props}
    >
      <div className="circle circle1" />
      <div className="circle circle2" />
      <div className="circle circle3" />
    </Trinity>
  );
}

export default TrinityRingsSpinner;


================================================
FILE: src/index.ts
================================================
export type { EpicSpinnerProps } from "./types";

export { default as AtomSpinner } from "./components/AtomSpinner";

export { default as BreedingRhombusSpinner } from "./components/BreedingRhombusSpinner";

export { default as CirclesToRhombusesSpinner } from "./components/CirclesToRhombusesSpinner";

export { default as FingerprintSpinner } from "./components/FingerprintSpinner";
export { default as FlowerSpinner } from "./components/FlowerSpinner";

export { default as FulfillingBouncingCircleSpinner } from "./components/FulfillingBouncingCircleSpinner";

export { default as FulfillingSquareSpinner } from "./components/FulfillingSquareSpinner";

export { default as HalfCircleSpinner } from "./components/HalfCircleSpinner";
export { default as HollowDotsSpinner } from "./components/HollowDotsSpinner";

export { default as IntersectingCirclesSpinner } from "./components/IntersectingCirclesSpinner";

export { default as LoopingRhombusesSpinner } from "./components/LoopingRhombusesSpinner";

export { default as OrbitSpinner } from "./components/OrbitSpinner";
export { default as PixelSpinner } from "./components/PixelSpinner";
export { default as RadarSpinner } from "./components/RadarSpinner";

export { default as ScalingSquaresSpinner } from "./components/ScalingSquaresSpinner";

export { default as SelfBuildingSquareSpinner } from "./components/SelfBuildingSquareSpinner";

export { default as SemipolarSpinner } from "./components/SemipolarSpinner";
export { default as SpringSpinner } from "./components/SpringSpinner";

export { default as SwappingSquaresSpinner } from "./components/SwappingSquaresSpinner";

export { default as TrinityRingsSpinner } from "./components/TrinityRingsSpinner";


================================================
FILE: src/types.ts
================================================
import type { CSSProperties, HTMLAttributes } from "react";

export interface EpicSpinnerProps extends HTMLAttributes<HTMLDivElement> {
  size?: number;
  animationDuration?: number;
  color?: string;
  className?: string;
  style?: CSSProperties;
}


================================================
FILE: tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "declaration": true,
    "declarationDir": "dist",
    "outDir": "dist",
    "lib": ["ES2020", "DOM"]
  },
  "include": ["src"]
}


================================================
FILE: vite.config.ts
================================================
import { defineConfig } from "vite-plus";

export default defineConfig({
  staged: {
    "*": "vp check --fix",
  },
  lint: {
    options: {
      typeAware: true,
      typeCheck: true,
    },
  },
  pack: {
    entry: ["src/index.ts"],
    format: ["esm", "cjs"],
    dts: true,
    deps: {
      neverBundle: ["react", "react-dom", "prop-types", "styled-components"],
    },
  },
});