From a9d429b7221935fab9b5cbf440c64fc676e24eae Mon Sep 17 00:00:00 2001
From: "Vineeth.TR" <vineethtrv@gmail.com>
Date: Sun, 6 Jul 2025 18:25:12 +0530
Subject: [PATCH 1/4] feat: Initialize React application with Vite and
 TypeScript

- Added main application structure with App component.
- Created Header and Footer components with styles.
- Implemented Outlet component for rendering nested routes.
- Developed Tile component for displaying loading animations.
- Introduced SCSS for styling and organized styles into modules.
- Set up Vite configuration for React and TypeScript support.
- Removed legacy SCSS file and replaced it with modular styles.
- Added SVG icon for Vite.
- Configured TypeScript settings for strict type checking and module resolution.
---
 .gitignore                                    |   24 +
 README copy.md                                |   54 +
 css/styles.css                                |    1 -
 eslint.config.js                              |   28 +
 images/Cooking.mp4                            |  Bin 117720 -> 0 bytes
 images/Loader-one.png                         |  Bin 4899 -> 0 bytes
 images/Loader-screen.png                      |  Bin 55583 -> 0 bytes
 index.html                                    |  109 +-
 js/app.js                                     |  115 -
 js/loaders/bubble.js                          | 1173 ------
 js/loaders/circle.js                          | 2851 -------------
 js/loaders/graph.js                           | 1207 ------
 js/loaders/line.js                            |  543 ---
 js/loaders/objects.js                         | 2890 -------------
 js/loaders/progress.js                        |  966 -----
 js/loaders/rect.js                            | 1827 ---------
 js/loaders/skeleton.js                        |  291 --
 js/loaders/text.js                            |  835 ----
 package-lock.json                             | 3635 +++++++++++++++++
 package.json                                  |   30 +
 {images => public/images}/Frame 5.png         |  Bin
 .../images}/android-chrome-192x192.png        |  Bin
 .../images}/android-chrome-512x512.png        |  Bin
 .../images}/apple-touch-icon.png              |  Bin
 {images => public/images}/codepen.png         |  Bin
 {images => public/images}/favicon-16x16.png   |  Bin
 {images => public/images}/favicon-32x32.png   |  Bin
 {images => public/images}/favicon.ico         |  Bin
 images/git.png => public/images/github.png    |  Bin
 {images => public/images}/loader.png          |  Bin
 {images => public/images}/mstile-150x150.png  |  Bin
 public/images/react.svg                       |    1 +
 .../images}/safari-pinned-tab.svg             |    0
 public/images/vite.svg                        |    1 +
 scss/styles.scss                              |  301 --
 src/App.scss                                  |    0
 src/App.tsx                                   |   15 +
 src/components/Footer/Footer.module.scss      |   20 +
 src/components/Footer/Footer.tsx              |   16 +
 src/components/Header/Header.module.scss      |   60 +
 src/components/Header/Header.tsx              |   19 +
 src/components/Outlet/Outlet.module.scss      |    9 +
 src/components/Outlet/Outlet.tsx              |   19 +
 src/components/Tile/Tile.module.scss          |   19 +
 src/components/Tile/Tile.tsx                  |   16 +
 src/components/index.ts                       |    6 +
 src/index.scss                                |   36 +
 src/loaders/index.ts                          |    0
 src/loaders/stylesheets/anime/index.ts        |    0
 src/loaders/stylesheets/circle/index.ts       |    0
 src/loaders/stylesheets/circle/op1.module.css |   20 +
 src/loaders/stylesheets/dot/index.ts          |    0
 src/loaders/stylesheets/index.ts              |    0
 src/loaders/stylesheets/objects/index.ts      |    0
 src/loaders/stylesheets/progress/index.ts     |    0
 src/loaders/stylesheets/rect/index.ts         |    0
 src/loaders/stylesheets/skelton/index.ts      |    0
 src/loaders/stylesheets/spike/index.ts        |    0
 src/loaders/stylesheets/text/index.ts         |    0
 src/main.tsx                                  |   10 +
 src/vite-env.d.ts                             |    1 +
 tsconfig.app.json                             |   26 +
 tsconfig.json                                 |    7 +
 tsconfig.node.json                            |   24 +
 vite.config.ts                                |    7 +
 65 files changed, 4113 insertions(+), 13099 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 README copy.md
 delete mode 100644 css/styles.css
 create mode 100644 eslint.config.js
 delete mode 100644 images/Cooking.mp4
 delete mode 100644 images/Loader-one.png
 delete mode 100644 images/Loader-screen.png
 delete mode 100644 js/app.js
 delete mode 100644 js/loaders/bubble.js
 delete mode 100644 js/loaders/circle.js
 delete mode 100644 js/loaders/graph.js
 delete mode 100644 js/loaders/line.js
 delete mode 100644 js/loaders/objects.js
 delete mode 100644 js/loaders/progress.js
 delete mode 100644 js/loaders/rect.js
 delete mode 100644 js/loaders/skeleton.js
 delete mode 100644 js/loaders/text.js
 create mode 100644 package-lock.json
 create mode 100644 package.json
 rename {images => public/images}/Frame 5.png (100%)
 rename {images => public/images}/android-chrome-192x192.png (100%)
 rename {images => public/images}/android-chrome-512x512.png (100%)
 rename {images => public/images}/apple-touch-icon.png (100%)
 rename {images => public/images}/codepen.png (100%)
 rename {images => public/images}/favicon-16x16.png (100%)
 rename {images => public/images}/favicon-32x32.png (100%)
 rename {images => public/images}/favicon.ico (100%)
 rename images/git.png => public/images/github.png (100%)
 rename {images => public/images}/loader.png (100%)
 rename {images => public/images}/mstile-150x150.png (100%)
 create mode 100644 public/images/react.svg
 rename {images => public/images}/safari-pinned-tab.svg (100%)
 create mode 100644 public/images/vite.svg
 delete mode 100644 scss/styles.scss
 create mode 100644 src/App.scss
 create mode 100644 src/App.tsx
 create mode 100644 src/components/Footer/Footer.module.scss
 create mode 100644 src/components/Footer/Footer.tsx
 create mode 100644 src/components/Header/Header.module.scss
 create mode 100644 src/components/Header/Header.tsx
 create mode 100644 src/components/Outlet/Outlet.module.scss
 create mode 100644 src/components/Outlet/Outlet.tsx
 create mode 100644 src/components/Tile/Tile.module.scss
 create mode 100644 src/components/Tile/Tile.tsx
 create mode 100644 src/components/index.ts
 create mode 100644 src/index.scss
 create mode 100644 src/loaders/index.ts
 create mode 100644 src/loaders/stylesheets/anime/index.ts
 create mode 100644 src/loaders/stylesheets/circle/index.ts
 create mode 100644 src/loaders/stylesheets/circle/op1.module.css
 create mode 100644 src/loaders/stylesheets/dot/index.ts
 create mode 100644 src/loaders/stylesheets/index.ts
 create mode 100644 src/loaders/stylesheets/objects/index.ts
 create mode 100644 src/loaders/stylesheets/progress/index.ts
 create mode 100644 src/loaders/stylesheets/rect/index.ts
 create mode 100644 src/loaders/stylesheets/skelton/index.ts
 create mode 100644 src/loaders/stylesheets/spike/index.ts
 create mode 100644 src/loaders/stylesheets/text/index.ts
 create mode 100644 src/main.tsx
 create mode 100644 src/vite-env.d.ts
 create mode 100644 tsconfig.app.json
 create mode 100644 tsconfig.json
 create mode 100644 tsconfig.node.json
 create mode 100644 vite.config.ts

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README copy.md b/README copy.md
new file mode 100644
index 0000000..40ede56
--- /dev/null
+++ b/README copy.md	
@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```
diff --git a/css/styles.css b/css/styles.css
deleted file mode 100644
index 39e7162..0000000
--- a/css/styles.css
+++ /dev/null
@@ -1 +0,0 @@
-*,:after,:before{box-sizing:border-box}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar:hover{width:18px;background:#0004}::-webkit-scrollbar-track:hover{background:#0001}::-webkit-scrollbar-track{background:#263038}::-webkit-scrollbar-thumb{background:#ff3d00}::-webkit-scrollbar-thumb:hover{background:#fff}body{margin:0;background:#263038;font-family:Arial,Helvetica,sans-serif}body>img{display:none}body.pop{overflow:hidden}header{background:#0d161b;padding:10px 20px;min-height:50px;width:100%;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}header nav{display:flex;align-items:center;justify-content:center}header nav .nav-btn{display:inline-block;width:32px;height:32px;background-color:#fff;background-repeat:no-repeat;background-size:110% auto;background-position:center;border-radius:50%}header nav .nav-btn.git{background-image:url(../images/git.png)}header nav .nav-btn.codepen{background-image:url(../images/codepen.png)}header nav .nav-btn+.nav-btn{margin-left:10px}.brand{color:#fff;font-size:32px;display:inline-block;position:relative}.brand::after{content:'';position:absolute;left:20px;bottom:7px;border:3px solid #fff;border-bottom-color:#ff3d00;width:20px;height:20px;border-radius:50%;animation:brandRotation .6s linear infinite}@keyframes brandRotation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}#main{min-height:100vh;width:100%;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}#main .section{min-width:200px;width:33.33%;height:360px;padding:10px;position:relative;display:flex;align-items:center;justify-content:center;color:#ccc;cursor:pointer;transition:.2s linear}#main .section:nth-child(2n+1){background:rgba(0,0,0,.1)}#main .section:hover{background:rgba(0,0,0,.3)}@media (max-width:768px){#main .section{width:50%}}@media (max-width:480px){#main .section{width:100%}}footer{background:#0d161b;padding:15px;text-align:center;color:#ccc;width:100%;font-size:12px}footer a{font-size:16px;color:#fff;transition:.2s ease;text-decoration:none;display:inline-block;position:relative}footer a:active,footer a:hover{color:#fff;transform:scale(1.15)}.overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:2000;visibility:hidden;opacity:0;overflow-y:auto}.overlay.in{visibility:visible;opacity:1}.btn-close{position:absolute;top:0;right:0;z-index:5;line-height:20px;height:20px;width:20px;font-size:26px;font-weight:400;padding:0;background:#eee;border:none;outline:0;cursor:pointer}.popup{position:relative;transform:translateY(-20px);background:#fff;padding:20px 15px;max-width:600px;min-height:400px;margin:20px auto;width:100%;transition:.2s ease-in}.in .popup{transform:translateY(10px)}.showcase{background:#263038;margin-bottom:15px}.showcase .section{width:100%;height:300px;padding:10px;position:relative;display:flex;align-items:center;justify-content:center}.code-area .code-header{padding:5px 10px;background:#222;color:#fff;font-size:14px;position:relative}.code-area+.code-area{margin-top:10px}.copy{outline:0;border:none;background:#000;position:absolute;right:5px;top:50%;transform:translateY(-50%);color:#fff;padding:3px 8px;cursor:pointer;user-select:none}.copy::before{content:'';display:inline-block;width:10px;height:12px;border:1px solid #fff;box-shadow:2px -2px #000,3px -3px;margin-right:8px;position:relative;top:3px}code{background:#000;padding:5px 10px;display:block;white-space:pre;color:#03a9f4;min-height:30px;font-size:14px;line-height:18px}#markup{color:#f4a003}#css{max-height:200px;overflow:auto}div[data-id=prog-crak-erh]{justify-content:flex-start!important}
\ No newline at end of file
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..092408a
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/images/Cooking.mp4 b/images/Cooking.mp4
deleted file mode 100644
index edb0faa28e19509d13687dc3c2a14cf9d2b9c6ba..0000000000000000000000000000000000000000
GIT binary patch
diff --git a/images/Loader-one.png b/images/Loader-one.png
deleted file mode 100644
index 944ce4df518f7ea23368c4ba40de008ec06bb5b5..0000000000000000000000000000000000000000
GIT binary patch
diff --git a/images/Loader-screen.png b/images/Loader-screen.png
deleted file mode 100644
index 7a9080ed0f3aaba1026cdfe2c07cf3fd45ea1c29..0000000000000000000000000000000000000000
GIT binary patch
diff --git a/index.html b/index.html
index 9067f2b..326ff21 100644
--- a/index.html
+++ b/index.html
@@ -1,102 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
-    <link rel="manifest" href="site.webmanifest">
-    <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#ffffff">
-    <meta name="msapplication-TileColor" content="#da532c">
-    <meta name="theme-color" content="#ffffff">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CSS loaders and Spinners</title>
-
-    <!-- Search Engine -->
-    <meta name="title" content="CSS loaders and spinner">
-    <meta name="description" content="CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.">
-    <meta name="keywords" content="css, loader, spinners , loading , waiting, css loading, cssloaders, css loaders, css3 loaders,  css spinners,  css3spinners, ,  css3 spinners, ,  cssspinners,  HTML, CSS3">
-    <meta name="author" content="Vineeth TR">
-
-    <!-- Schema.org for Google -->
-    <meta itemprop="name" content="CSS loaders and spinner">
-    <meta itemprop="description" content="CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.">
-    <meta name="image" content="https://cssloaders.github.io/images/Loader-screen.png">
-    
-    <!-- Open Graph general (Facebook, Pinterest & Google+) -->
-    <meta name="og:title" content="CSS loaders and spinners">
-    <meta name="og:description" content="CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.">
-    <meta name="og:image" content="https://cssloaders.github.io/images/Loader-screen.png">
-    <meta name="og:url" content="https://cssloaders.github.io/">
-    <meta name="og:site_name" content="CSS loaders and spinners">
-    <meta name="fb:admins" content="https://www.facebook.com/vinithtrv">
-    <meta name="og:type" content="website">
-
-    <!-- Twitter -->
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="CSS loaders and spinners">
-    <meta name="twitter:description" content="CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.">
-    <meta property="twitter:url" content="https://cssloaders.github.io/">
-    <meta name="twitter:creator" content="@vineethtrv">
-    <meta name="twitter:image:src" content="https://cssloaders.github.io/images/Loader-screen.png">
-
-    <link rel="stylesheet" href="css/styles.css">
-
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-4F1SESL3HZ"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'G-4F1SESL3HZ');
-    </script>
-</head>
-<body>
-    <header>
-        <span class="brand">L &nbsp; aders</span>
-
-        <nav>
-            <a class="nav-btn codepen" target="_blank" href="https://codepen.io/vineethtrv/pen/NWxZqMM"></a>
-            <a class="nav-btn git" target="_blank" href="https://github.com/vineethtrv/css-loader"></a>
-        </nav>
-    </header>
-
-    <main id="main"></main>
-
-
-    <footer>
-        <a href="https://vineethtrv.github.io/" target="_blank" >
-            <span>👨&zwj;💻</span>
-            Vineeth TR
-        </a>
-    </footer>
-
-
-    <div class="overlay">
-        <div class="popup">
-            <button class="btn-close">&times;</button>
-            <div class="showcase"></div>
-            <div class="code-content">
-                <div class="code-area">
-                    <div class="code-header">
-                        HTML
-                        <button class="copy" data-id="markup">Copy</button>
-                    </div>
-                    <code id="markup"></code>
-                </div>
-                <div class="code-area">
-                    <div class="code-header">
-                        CSS
-                        <button class="copy" data-id="css">Copy</button>
-                    </div>
-                    <code id='css'></code>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script  type="module" src="./js/app.js"></script>
-</body>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/js/app.js b/js/app.js
deleted file mode 100644
index 0641c28..0000000
--- a/js/app.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { BUBBLE } from './loaders/bubble.js';
-import { CIRCLE } from './loaders/circle.js';
-import { RECT } from './loaders/rect.js';
-import { LINE } from './loaders/line.js';
-import { PROGRESS } from './loaders/progress.js';
-import { TEXT } from './loaders/text.js';
-import { GRAPH } from './loaders/graph.js';
-import { OBJECTS } from './loaders/objects.js';
-import { SKELETON } from './loaders/skeleton.js';
-
-
-
-const LOADERS = [...CIRCLE, ...BUBBLE, ...RECT, ...LINE, ...PROGRESS, ...TEXT, ...OBJECTS, ...GRAPH , ...SKELETON ];
-
-
-const main = document.getElementById('main');
-
-
-// Create Spinners 
-LOADERS.forEach((loader, i) => {    
-    // Append Loader
-    main.appendChild(createLoader(i));
-    
-})
-
-
-function createLoader(i){
-    let loader = LOADERS[i];
-   
-    // Create html
-    let sectionEl = document.createElement('div');
-    sectionEl.setAttribute('class', 'section');
-    sectionEl.setAttribute('data-id', loader.id);
-    sectionEl.setAttribute('data-index', (i + 1));
-    let shadowRoot = sectionEl.attachShadow({ mode: 'open' });
-    
-    let loaderEl = document.createElement('span');
-    loaderEl.setAttribute('class', 'loader');
-    loaderEl.innerHTML = loader.content || null;
-    shadowRoot.appendChild(loaderEl);
-
-    //Create CSS 
-    let loaderStyles = document.createElement('style');
-    loaderStyles.type = 'text/css';
-    loaderStyles.innerHTML = loader.css;
-    shadowRoot.appendChild(loaderStyles);
-
-    return sectionEl
-}
-
-
-
-
-document.querySelectorAll('#main .section').forEach(elm => {
-    elm.addEventListener('click', (e) => {
-        let index = parseInt(e.target.dataset.index);
-        let showCase = document.querySelector('.showcase');
-
-        showCase.replaceChildren(createLoader((index - 1)));
-
-        
-        // console.log(e);
-        showCase.dataset.index = index;
-
-        // load code
-        document.querySelector('#markup').textContent = LOADERS[index - 1].html;
-        document.querySelector('#css').textContent = LOADERS[index - 1].css;
-        
-        // popup
-        document.querySelector('body').classList.add('pop')
-        document.querySelector('.overlay').classList.add('in')
-    })
-})
-
-
-// close popup
-document.querySelector('.btn-close').addEventListener('click', (e) => {
-    document.querySelector('body').classList.remove('pop')
-    document.querySelector('.overlay').classList.remove('in');
-});
-
-document.querySelector('.overlay').addEventListener('click', (e) => {
-    if (e.target.className === "overlay in") {
-        document.querySelector('body').classList.remove('pop')
-        document.querySelector('.overlay').classList.remove('in');
-    }
-});
-
-
-// Copy to clipboard
-document.querySelectorAll('.copy').forEach(copyBtn => {
-    copyBtn.addEventListener('click', (e) => {
-        const id = e.target.dataset.id;
-        selectText(id);
-        document.execCommand("copy");
-        e.target.textContent = 'Copied';
-
-        setTimeout( time => e.target.textContent = 'Copy' , 300);
-    })
-});
-
-
-// select Text
-function selectText(containerid) {
-    if (document.selection) { // IE
-        var range = document.body.createTextRange();
-        range.moveToElementText(document.getElementById(containerid));
-        range.select();
-    } else if (window.getSelection) {
-        var range = document.createRange();
-        range.selectNode(document.getElementById(containerid));
-        window.getSelection().removeAllRanges();
-        window.getSelection().addRange(range);
-    }
-}
diff --git a/js/loaders/bubble.js b/js/loaders/bubble.js
deleted file mode 100644
index 5efdcf1..0000000
--- a/js/loaders/bubble.js
+++ /dev/null
@@ -1,1173 +0,0 @@
-export const BUBBLE = [
-    {
-        id: "5s44kmptpx",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: block;
-  margin:15px auto;
-  position: relative;
-  box-sizing: border-box;
-  animation: zeroRotation 1s linear infinite alternate;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background: #FF3D00;
-  width: 16px;
-  height: 16px;
-  transform: translate(-50%, 50%);
-  border-radius: 50%;
-}
-.loader::before {
-  left: auto;
-  right: 0;
-  transform: translate(50%, 100%);
-}
-
-@keyframes zeroRotation {
-  0% {
-    transform: scale(1) rotate(0deg);
-  }
-  100% {
-    transform: scale(0) rotate(360deg);
-  }
-} `,
-    }, {
-        id: "w216qsky6id",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: block;
-  margin:15px auto;
-  position: relative;
-  color: #FFF;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  top: 0;
-  background-color: #FFF;
-  border-radius: 50%;
-  animation: scale50 1s infinite ease-in-out;
-}
-.loader::before {
-  top: auto;
-  bottom: 0;
-  background-color: #FF3D00;
-  animation-delay: 0.5s;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
-@keyframes scale50 {
-  0%, 100% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1);
-  }
-} `,
-    }, {
-        id: "e53631pwlqi",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: block;
-  margin:15px auto;
-  position: relative;
-  color: #FFF;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  top: 50%;
-  left: 50%;
-  transform: scale(0.5) translate(0, 0);
-  background-color: #FFF;
-  border-radius: 50%;
-  animation: animloader 1s infinite ease-in-out;
-}
-.loader::before {
-  background-color: #FF3D00;
-  transform: scale(0.5) translate(-48px, -48px);
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
-@keyframes animloader {
-    50% {
-      transform: scale(1) translate(-50%, -50%);
-}
-}
-    `,
-    },
-    
-  {
-    id: "prePresLding34",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        position: relative;
-      }
-      .loader:before ,  .loader:after {
-          content: '';
-          width: 15px;
-          height: 15px;
-          display: block;
-          position: relative;
-          margin: 10px auto ;
-          border-radius: 50%;
-          background: #fff;
-          animation: left 1s infinite ease-in-out;
-        }
-        .loader:after {
-          background: #FF3D00;
-          animation: right 1s infinite ease-in-out;
-        }
-
-
-      @keyframes right {
-        0% , 100%{transform: translate(-15px) }
-        50% { transform: translate(15px) }
-      }
-
-      @keyframes left {
-        0% , 100%{ transform: translate(15px) }
-        50% { transform: translate(-15px) }
-      }
-
-      
-      `
-    },
-
-  {
-    id: "ball@2Xsn-1",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  box-sizing: border-box;
-  position: relative;
-  width: 48px;
-  height: 48px;
-  animation: flip 1s linear infinite;
-}
-.loader:after, .loader:before {
-  content: "";
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  border-radius: 50%;
-  background: #FF3D00;
-  animation: spin 1s linear infinite;
-  transform-origin: 12px 100%;
-}
-.loader:before {
-  transform-origin: 0 50%;
-  background: #fff;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@keyframes flip {
-  0%, 50% {
-    transform: rotateY(0deg);
-  }
-  50%, 100% {
-    transform: rotateY(180deg);
-  }
-}
-    `
-    },
-
-
-  {
-    id: "ball@2Xsn-2",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  box-sizing: border-box;
-  position: relative;
-  width: 48px;
-  height: 48px;
-  animation: spin 1s linear infinite;
-}
-.loader:after, .loader:before {
-  content: "";
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  border-radius: 50%;
-  background: #FF3D00;
-  animation: spin 1s linear infinite;
-  transform-origin: 0px 100%;
-}
-.loader:before {
-  transform-origin: 0 50%;
-  background: #fff;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-    `
-    },
-  {
-    id: "ball@2Xsn-3",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  box-sizing: border-box;
-  position: relative;
-  width: 48px;
-  height: 48px;
-  animation: spin 1s linear infinite;
-}
-.loader:after, .loader:before {
-  content: "";
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  border-radius: 50%;
-  background: #FF3D00;
-  animation: flipY 1s linear infinite;
-  transform-origin: 50% 50%;
-}
-.loader:before {
-  transform-origin: 0% 100%;
-  background: #fff;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@keyframes flipY {
-  0%, 50% {
-    transform: rotateY(0deg);
-  }
-  50%, 100% {
-    transform: rotateY(180deg);
-  }
-}
-    `
-    },
-
-
-  {
-    id: "ball@2Xsn-4",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: calc(100px - 14px);
-  height: 50px;
-  position: relative;
-  animation: flippx 1s infinite linear;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  margin: auto;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #FF3D00;
-  transform-origin: -14px 50%;
-  animation: spin 0.5s infinite linear;
-}
-@keyframes flippx {
-  0%, 49% {
-    transform: scaleX(1);
-  }
-  50%, 100% {
-    transform: scaleX(-1);
-  }
-}
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-    `
-    },
-  {
-    id: "msgerBblFdxbl",
-    html: `<span class="loader"></span>`,
-    css: `.loader, .loader:before, .loader:after {
-  border-radius: 50%;
-  width: 2.5em;
-  height: 2.5em;
-  animation-fill-mode: both;
-  animation: bblFadInOut 1.8s infinite ease-in-out;
-}
-.loader {
-  color: #FFF;
-  font-size: 7px;
-  position: relative;
-  text-indent: -9999em;
-  transform: translateZ(0);
-  animation-delay: -0.16s;
-}
-.loader:before,
-.loader:after {
-  content: '';
-  position: absolute;
-  top: 0;
-}
-.loader:before {
-  left: -3.5em;
-  animation-delay: -0.32s;
-}
-.loader:after {
-  left: 3.5em;
-}
-
-@keyframes bblFadInOut {
-  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
-  40% { box-shadow: 0 2.5em 0 0 }
-}
-    `
-    },
-  {
-    id: "msgerBblLdan3xbl",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background-color: #fff;
-  box-shadow: 32px 0 #fff, -32px 0 #fff;
-  position: relative;
-  animation: flash 0.5s ease-out infinite alternate;
-}
-
-@keyframes flash {
-  0% {
-    background-color: #FFF2;
-    box-shadow: 32px 0 #FFF2, -32px 0 #FFF;
-  }
-  50% {
-    background-color: #FFF;
-    box-shadow: 32px 0 #FFF2, -32px 0 #FFF2;
-  }
-  100% {
-    background-color: #FFF2;
-    box-shadow: 32px 0 #FFF, -32px 0 #FFF2;
-  }
-}
-      `
-    },
-    
-    
-    
-    
-    {
-        id: "qt4al5cwmmg",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  display: block;
-  margin:15px auto;
-  position: relative;
-  background: #FFF;
-  box-sizing: border-box;
-  animation: shadowExpandX 2s linear infinite alternate;
-}
-
-@keyframes shadowExpandX {
-  0% {
-    box-shadow: 0 0, 0 0;
-    color: rgba(255, 255, 255, 0.2);
-  }
-  100% {
-    box-shadow: -24px 0, 24px 0;
-    color: rgba(255, 255, 255, 0.8);
-  }
-}`,
-    }, {
-        id: "1jxkx6vu7vj",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  display: block;
-  margin:15px auto;
-  position: relative;
-  background: #FFF;
-  box-shadow: -24px 0 #FFF, 24px 0 #FFF;
-  box-sizing: border-box;
-  animation: shadowPulse 2s linear infinite;
-}
-
-@keyframes shadowPulse {
-  33% {
-    background: #FFF;
-    box-shadow: -24px 0 #FF3D00, 24px 0 #FFF;
-  }
-  66% {
-    background: #FF3D00;
-    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
-  }
-  100% {
-    background: #FFF;
-    box-shadow: -24px 0 #FFF, 24px 0 #FF3D00;
-  }
-}
-`,
-    }, {
-        id: "h36psmkc5la",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  display: block;
-  margin:15px auto;
-  position: relative;
-  background: #FF3D00;
-  color: #FFF;
-  box-shadow: -24px 0, 24px 0;
-  box-sizing: border-box;
-  animation: rotation 2s ease-in-out infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
-`,
-    },
-  {
-    id: "collution2BallJp1x",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 82px;
-  height: 18px;
-  position: relative;
-}
-.loader::before , .loader::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  transform: translate(-50% , 10%);
-  top: 0;
-  background: #FF3D00;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  animation: jump 0.5s ease-in infinite alternate;
-}
-
-.loader::after {
-  background: #0000;
-  color: #fff;
-  top: 100%;
-  box-shadow: 32px -20px , -32px -20px;
-  animation: split 0.5s ease-out infinite alternate;
-}
-
-@keyframes split {
-  0% { box-shadow: 8px -20px, -8px -20px}
-  100% { box-shadow: 32px -20px , -32px -20px}
-}
-@keyframes jump {
- 0% { transform: translate(-50% , -150%)}
- 100% { transform: translate(-50% , 10%)}
-}
-`,
-    },
-
-  {
-    id: "bbl2xcrlrot",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #FF3D00;
-  position: relative;
-}
-.loader:before,
-.loader:after {
-  content: "";
-  position: absolute;
-  border-radius: 50%;
-  inset: 0;
-  background: #fff;
-  transform: rotate(0deg) translate(30px);
-  animation: rotate 1s ease infinite;
-}
-.loader:after {
-  animation-delay: 0.5s
-}
-@keyframes rotate {
-  100% {transform: rotate(360deg) translate(30px)
-}
-    `,
-    },
-    
-
-  {
-    id: "brb1xbeeMv",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 64px;
-  height: 12px;
-  background:
-    radial-gradient(circle 6px, #FFF 100%, transparent 0),
-    radial-gradient(circle 6px, #FFF 100%, transparent 0);
-  background-size:12px 12px;
-  background-position: left center , right center ;
-  background-repeat: no-repeat;
-  position: relative;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: #FF3D00;
-  inset:0;
-  margin: auto;
-  animation: mvX 0.6s, mvY 0.3s;
-  animation-timing-function:cubic-bezier(.5,-300,.5, 300);
-  animation-iteration-count:infinite;
-}
-
-@keyframes mvX {
-    100% { left: 0.85px}
-}
-@keyframes mvY {
-    100% { top : 0.5px }
-}
-      `,
-    },
-    
-    
-    {
-        id: "b4bqez184d",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  display: block;
-  margin:15px auto;
-  position: relative;
-  color: #FFF;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite alternate;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: -38px -6px, -14px 6px,  14px -6px;
-  }
-  33% {
-    box-shadow: -38px 6px, -14px -6px,  14px 6px;
-  }
-  66% {
-    box-shadow: -38px -6px, -14px 6px, 14px -6px;
-  }
-  100% {
-    box-shadow: -38px 6px, -14px -6px, 14px 6px;
-  }
-}`,
-    }, 
-  {
-    id: "bbl3xrnhit",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 108px;
-  height: 16px;
-  background:
-    radial-gradient(circle 8px at 8px center, #FFF 100%, transparent 0),
-    radial-gradient(circle 8px at 8px center, #FFF 100%, transparent 0);
-  background-size: 16px 16px;
-  background-repeat: no-repeat;
-  position: relative;
-  animation: ballX 1s linear infinite;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background:#FFF;
-  inset:0;
-  margin:auto;
-  animation: moveX 1s cubic-bezier(0.5,300,0.5,-300) infinite;
-}
-@keyframes ballX {
-  0%,25%,50%,75%, 100%  {background-position: 25% 0,75% 0}
-  40%     {background-position: 25% 0,85% 0}
-  90%     {background-position: 15% 0,75% 0}
-}
-@keyframes moveX {
-  100% {transform:translate(0.15px)}
-}
-  `,
-    }, 
-  {
-    id: "ball#flRbc",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 100px;
-    height: 16px;
-  }
-  .loader:before , .loader:after{
-    content: "";
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: #fff;
-    box-shadow: 32px 0 #fff;
-    left: 0;
-    top: 0;
-    animation: ballMoveX 1s linear infinite;
-  }
-  .loader:after {
-    box-shadow: none;
-    transform-origin: 40px 0;
-    transform: rotate(-153deg);
-    animation: rotateLoader 1s linear infinite;
-  }
-
-  @keyframes rotateLoader {
-    0% , 10%{ transform: rotate(-153deg); }
-    90%, 100% { transform: rotate(0deg); }
-  }
-  @keyframes ballMoveX {
-    0% , 10%{  transform: translateX(0) }
-    90%, 100% { transform: translateX(32px) }
-  }
-      `,
-    },
-  {
-    id: "ballCrdLd",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-  width: 100px;
-  height: 16px;
-}
-.loader:before , .loader:after{
-  content: "";
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #fff;
-  box-shadow: 32px 0 #fff;
-  left: 0;
-  top: 0;
-  animation: ballMoveX 2s linear infinite;
-}
-.loader:after {
-  box-shadow: none;
-  transform: translateX(64px) scale(1);
-  z-index: 2;
-  animation: none;
-  animation: trfLoader 2s linear infinite;
-}
-
-@keyframes trfLoader {
-  0% , 5%{
-    transform: translateX(64px) scale(1);
-    background: #FFF;
-  }
-  10%{
-    transform: translateX(64px) scale(1);
-    background: #ff3d00;
-  }
-  40%{
-      transform: translateX(32px) scale(1.5);
-      background: #ff3d00;
-    }
-  90%, 95% {
-    transform: translateX(0px) scale(1);
-    background: #ff3d00;
-  }
-  100% {
-    transform: translateX(0px) scale(1);
-    background: #FFF;
-  }
-}
-@keyframes ballMoveX {
-  0% , 10%{  transform: translateX(0) }
-  90%, 100% { transform: translateX(32px) }
-}
-      `,
-    },
-
-  {
-    id: "ball4puncUp",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    animation: rotate 1s infinite;
-    height: 50px;
-    width: 50px;
-  }
-
-  .loader:before,
-  .loader:after {
-    border-radius: 50%;
-    content: "";
-    display: block;
-    height: 20px;
-    width: 20px;
-  }
-  .loader:before {
-    animation: ball1 1s infinite;
-    background-color: #fff;
-    box-shadow: 30px 0 0 #ff3d00;
-    margin-bottom: 10px;
-  }
-  .loader:after {
-    animation: ball2 1s infinite;
-    background-color: #ff3d00;
-    box-shadow: 30px 0 0 #fff;
-  }
-
-  @keyframes rotate {
-    0% { transform: rotate(0deg) scale(0.8) }
-    50% { transform: rotate(360deg) scale(1.2) }
-    100% { transform: rotate(720deg) scale(0.8) }
-  }
-
-  @keyframes ball1 {
-    0% {
-      box-shadow: 30px 0 0 #ff3d00;
-    }
-    50% {
-      box-shadow: 0 0 0 #ff3d00;
-      margin-bottom: 0;
-      transform: translate(15px, 15px);
-    }
-    100% {
-      box-shadow: 30px 0 0 #ff3d00;
-      margin-bottom: 10px;
-    }
-  }
-
-  @keyframes ball2 {
-    0% {
-      box-shadow: 30px 0 0 #fff;
-    }
-    50% {
-      box-shadow: 0 0 0 #fff;
-      margin-top: -20px;
-      transform: translate(15px, 15px);
-    }
-    100% {
-      box-shadow: 30px 0 0 #fff;
-      margin-top: 0;
-    }
-  }
-  `,
-    }, 
-
-
-
-    
-    {
-        id: "jk3s5paxg1",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  display: block;
-  margin:15px auto;
-  position: relative;
-  color: #FFF;
-  left: -100px;
-  box-sizing: border-box;
-  animation: shadowRolling 2s linear infinite;
-}
-
-@keyframes shadowRolling {
-  0% {
-    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
-  }
-  12% {
-    box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
-  }
-  25% {
-    box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
-  }
-  36% {
-    box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
-  }
-  50% {
-    box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
-  }
-  62% {
-    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
-  }
-  75% {
-    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
-  }
-  87% {
-    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
-  }
-  100% {
-    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
-  }
-}`,
-    }, {
-        id: "v6gj5f7r1a",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  display: block;
-  margin:15px auto;
-  position: relative;
-  color: #FFF;
-  box-sizing: border-box;
-  animation: animloader 2s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
-  }
-  25% {
-    box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 2px;
-  }
-  50% {
-    box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 2px,  -38px 0 0 -2px;
-  }
-  75% {
-    box-shadow: 14px 0 0 2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
-  }
-  100% {
-    box-shadow: 14px 0 0 -2px,  38px 0 0 2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
-  }
-}`,
-    },
-    
-    {
-        id: "mdqx53v2ufl",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  display: block;
-  margin:15px auto;
-  position: relative;
-  color: #FFF;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite alternate;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: -38px -12px ,  -14px 0,  14px 0, 38px 0;
-  }
-  33% {
-    box-shadow: -38px 0px, -14px -12px,  14px 0, 38px 0;
-  }
-  66% {
-    box-shadow: -38px 0px , -14px 0, 14px -12px, 38px 0;
-  }
-  100% {
-    box-shadow: -38px 0 , -14px 0, 14px 0 , 38px -12px;
-  }
-}
-
-`,
-    },
-
-  {
-    id: "bbl4flowBrix",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 16px;
-  height: 16px;
-  position: relative;
-  left: -32px;
-  border-radius: 50%;
-  color: #fff;
-  background: currentColor;
-  box-shadow: 32px 0 , -32px 0 ,  64px 0;
-}
-
-.loader::after {
-  content: '';
-  position: absolute;
-  left: -32px;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  border-radius: 10px;
-  background:#FF3D00;
-  animation: move 3s linear infinite alternate;
-}
-
-@keyframes move {
-  0% , 5%{
-    left: -32px;
-    width: 16px;
-  }
-  15% , 20%{
-    left: -32px;
-    width: 48px;
-  }
-  30% , 35%{
-    left: 0px;
-    width: 16px;
-  }
-  45% , 50%{
-    left: 0px;
-    width: 48px;
-  }
-  60% , 65%{
-    left: 32px;
-    width: 16px;
-  }
-
-  75% , 80% {
-    left: 32px;
-    width: 48px;
-  }
-  95%, 100% {
-    left: 64px;
-    width: 16px;
-  }
-`,
-    },
-
-  {
-    id: "ntonPend5Xbal",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background-color: #fff;
-  box-shadow: 32px 0 #fff, -32px 0 #fff;
-  position: relative;
-  animation: flash 0.3s ease-in infinite alternate;
-}
-.loader::before , .loader::after {
-  content: '';
-  position: absolute;
-  left: -64px;
-  top: 0;
-  background: #FFF;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  transform-origin: 35px -35px;
-  transform: rotate(45deg);
-  animation: hitL 0.3s ease-in infinite alternate;
-}
-
-.loader::after {
-  left: 64px;
-  transform: rotate(-45deg);
-  transform-origin: -35px -35px;
-  animation: hitR 0.3s ease-out infinite alternate;
-}
-
-@keyframes flash {
-  0%  , 100%{
-    background-color: rgba(255, 255, 255, 0.25);
-    box-shadow: 32px 0 rgba(255, 255, 255, 0.25), -32px 0 rgba(255, 255, 255, 0.25);
-  }
-  25% {
-    background-color: rgba(255, 255, 255, 0.25);
-    box-shadow: 32px 0 rgba(255, 255, 255, 0.25), -32px 0 rgba(255, 255, 255, 1);
-  }
-  50% {
-    background-color: rgba(255, 255, 255, 1);
-    box-shadow: 32px 0 rgba(255, 255, 255, 0.25), -32px 0 rgba(255, 255, 255, 0.25);
-  }
-  75% {
-    background-color: rgba(255, 255, 255, 0.25);
-    box-shadow: 32px 0 rgba(255, 255, 255, 1), -32px 0 rgba(255, 255, 255, 0.25);
-  }
-}
-
-@keyframes hitL {
- 0% {
-   transform: rotate(45deg);
-   background-color: rgba(255, 255, 255, 1);
-  }
-25% , 100% {
-   transform: rotate(0deg);
-  background-color: rgba(255, 255, 255, 0.25);
-  }
-}
-
-@keyframes hitR {
- 0% , 75% {
-   transform: rotate(0deg);
-   background-color: rgba(255, 255, 255, 0.25);
-  }
- 100% {
-   transform: rotate(-45deg);
-  background-color: rgba(255, 255, 255, 1);
-  }
-}
-`,
-    },
-  {
-    id: "cyclo5xballx",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        position: relative;
-  width: 15px;
-  height: 64px;
-}
-.loader::after , .loader::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  color: #fff;
-  background: currentColor;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  box-shadow: 45px 0 , -45px 0;
-  animation: move 0.5s linear infinite alternate;
-}
-
-.loader::before {
-  top: 100%;
-  box-shadow: 50px 0 ;
-  left: -25px;
-  animation-direction: alternate-reverse;
-}
-
-@keyframes move {
-  0% { top: 0 }
-  50% { top: 50% }
-  100% { top: 100% }
-}`,
-    },
-
-
-
-
-    {
-        id: "bbleHrSpinShdw34f",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-          position: relative;
-          display: flex;
-        }
-        .loader:before , .loader:after {
-            content: '';
-            width: 15px;
-            height: 15px;
-            display: inline-block;
-            position: relative;
-            margin: 0  5px  ;
-            border-radius: 50%;
-            color: #FFF;
-            background: currentColor;
-            box-shadow: 50px 0 ,  -50px 0;
-            animation: left 1s infinite ease-in-out;
-          }
-          .loader:after {
-            color: #FF3D00;
-            animation: right 1.1s infinite ease-in-out;
-          }
-
-
-        @keyframes right {
-          0% , 100%{transform: translateY(-10px) }
-          50% { transform: translateY(10px) }
-        }
-
-        @keyframes left {
-          0% , 100%{ transform: translateY(10px) }
-          50% { transform: translateY(-10px) }
-        }
-`,
-    },
-    {
-        id: "bbleVrncgShdw34f",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-            height: 150px;
-            position: relative;
-          }
-          .loader:before , .loader:after {
-              content: '';
-              width: 15px;
-              height: 15px;
-              display: block;
-              position: relative;
-              margin: 10px auto ;
-              border-radius: 50%;
-              color: #FFF;
-              background: currentColor;
-              box-shadow: 0 50px , 0 100px;
-              animation: left 1s infinite ease-in-out;
-            }
-            .loader:after {
-              animation: right 1.1s infinite ease-in-out;
-            }
-
-
-          @keyframes right {
-            0% , 100%{transform: translate(-15px) }
-            50% { transform: translate(15px) }
-          }
-
-          @keyframes left {
-            0% , 100%{ transform: translate(15px) }
-            50% { transform: translate(-15px) }
-          }
-        `,
-    },
-]
\ No newline at end of file
diff --git a/js/loaders/circle.js b/js/loaders/circle.js
deleted file mode 100644
index 92554ec..0000000
--- a/js/loaders/circle.js
+++ /dev/null
@@ -1,2851 +0,0 @@
-export const CIRCLE = [
-    {
-    id: "ortrjlqlykr",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    width: 48px;
-    height: 48px;
-    border: 5px solid #FFF;
-    border-bottom-color: #FF3D00;
-    border-radius: 50%;
-    display: inline-block;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-    }
-
-    @keyframes rotation {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-    } `,
-    }, 
-  {
-    id: "ortrjxx53ykr",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    width: 48px;
-    height: 48px;
-    border: 5px solid #FFF;
-    border-bottom-color: transparent;
-    border-radius: 50%;
-    display: inline-block;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-    }
-
-    @keyframes rotation {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-    } `,
-  },
-  {
-  id: "orj095k34jjr",
-  html: `<span class="loader"></span>`,
-  css: `.loader {
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
-      position: relative;
-      animation: rotate 1s linear infinite
-    }
-    .loader::before {
-      content: "";
-      box-sizing: border-box;
-      position: absolute;
-      inset: 0px;
-      border-radius: 50%;
-      border: 5px solid #FFF;
-      animation: prixClipFix 2s linear infinite ;
-    }
-
-    @keyframes rotate {
-      100%   {transform: rotate(360deg)}
-    }
-
-    @keyframes prixClipFix {
-        0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-        25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-        50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-        75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
-        100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
-    }`,
-  },
- 
-  {
-  id: "spin-fllwBRbease4jr",
-  html: `<span class="loader"></span>`,
-  css: `.loader {
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        position: relative;
-        animation: rotate 1s linear infinite
-      }
-      .loader::before , .loader::after {
-        content: "";
-        box-sizing: border-box;
-        position: absolute;
-        inset: 0px;
-        border-radius: 50%;
-        border: 5px solid #FFF;
-        animation: prixClipFix 2s linear infinite ;
-      }
-      .loader::after{
-        transform: rotate3d(90, 90, 0, 180deg );
-        border-color: #FF3D00;
-      }
-
-      @keyframes rotate {
-        0%   {transform: rotate(0deg)}
-        100%   {transform: rotate(360deg)}
-      }
-
-      @keyframes prixClipFix {
-          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-          75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-      }
-`,
-  },
-  {
-  id: "spin-fllwBRbInstEase4jr",
-  html: `<span class="loader"></span>`,
-  css: `.loader {
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        position: relative;
-        animation: rotate 1s linear infinite
-      }
-      .loader::before , .loader::after {
-        content: "";
-        box-sizing: border-box;
-        position: absolute;
-        inset: 0px;
-        border-radius: 50%;
-        border: 5px solid #FFF;
-        animation: prixClipFix 2s linear infinite ;
-      }
-      .loader::after{
-        inset: 8px;
-        transform: rotate3d(90, 90, 0, 180deg );
-        border-color: #FF3D00;
-      }
-
-      @keyframes rotate {
-        0%   {transform: rotate(0deg)}
-        100%   {transform: rotate(360deg)}
-      }
-
-      @keyframes prixClipFix {
-          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-          75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-      }
-`,
-  },
-  {
-  id: "spin-x2-ease4jr",
-  html: `<span class="loader"></span>`,
-  css: `.loader {
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        position: relative;
-        animation: rotate 1s linear infinite
-      }
-      .loader::before , .loader::after {
-        content: "";
-        box-sizing: border-box;
-        position: absolute;
-        inset: 0px;
-        border-radius: 50%;
-        border: 5px solid #FFF;
-        animation: prixClipFix 2s linear infinite ;
-      }
-      .loader::after{
-        border-color: #FF3D00;
-        animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
-        inset: 6px;
-      }
-
-      @keyframes rotate {
-        0%   {transform: rotate(0deg)}
-        100%   {transform: rotate(360deg)}
-      }
-
-      @keyframes prixClipFix {
-          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-          25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-          75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
-          100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
-      }`,
-  },
-
-
-
-    {
-        id: "ckf1cjlmi0m",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 3px solid #FFF;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-    content: '';  
-  box-sizing: border-box;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-bottom-color: #FF3D00;
-}
-    
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "j5av6mi6zo",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 3px solid #FFF;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-} 
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-bottom-color: #FF3D00;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "znxzf2hzg5",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 3px solid #FFF;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 3px solid;
-  border-color: #FF3D00 transparent;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "8z8lfq1886d",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 3px solid #FFF;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  border: 3px solid;
-  border-color: #FF3D00 transparent;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "5vswdr9qe3x",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 2px solid #FFF;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background: #FF3D00;
-  width: 6px;
-  height: 6px;
-  transform: translate(150%, 150%);
-  border-radius: 50%;
-}
-.loader::before {
-  left: auto;
-  top: auto;
-  right: 0;
-  bottom: 0;
-  transform: translate(-150%, -150%);
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "sn2z4w7ryzh",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 2px solid #FFF;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background: #FF3D00;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-.loader::before {
-  left: auto;
-  top: auto;
-  right: 0;
-  bottom: 0;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "cu3hszfsd6",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 3px solid #FFF;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background: #FF3D00;
-  width: 16px;
-  height: 16px;
-  transform: translate(-50%, 50%);
-  border-radius: 50%;
-}
-    
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "ibcq0dcfc3d",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  border: 2px solid #FF3D00;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 4px;
-  top: 4px;
-  border: 2px solid #FFF;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-}
-    
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "wtkcrjte7d",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  border: 3px solid;
-  border-color: #FFF #FFF transparent;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  border: 3px solid;
-  border-color: transparent #FF3D00 #FF3D00;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  animation: rotationBack 0.5s linear infinite;
-  transform-origin: center center;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
-    
-@keyframes rotationBack {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(-360deg);
-  }
-}
-    `,
-    }, {
-        id: "ujnxjtlwqu",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  border: 3px solid;
-  border-color: #FFF #FFF transparent transparent;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  border: 3px solid;
-  border-color: transparent transparent #FF3D00 #FF3D00;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  box-sizing: border-box;
-  animation: rotationBack 0.5s linear infinite;
-  transform-origin: center center;
-}
-.loader::before {
-  width: 32px;
-  height: 32px;
-  border-color: #FFF #FFF transparent transparent;
-  animation: rotation 1.5s linear infinite;
-}
-    
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
-@keyframes rotationBack {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(-360deg);
-  }
-}
-    `,
-    }, {
-        id: "m8h17ktqkeh",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 3px dotted #FFF;
-  border-style: solid solid dotted dotted;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 2s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  border: 3px dotted #FF3D00;
-  border-style: solid solid dotted;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  animation: rotationBack 1s linear infinite;
-  transform-origin: center center;
-}
-    
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
-@keyframes rotationBack {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(-360deg);
-  }
-} `,
-    }, {
-        id: "fe5gga2b3j",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 2px solid #FFF;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 50%;
-  top: 0;
-  background: #FF3D00;
-  width: 3px;
-  height: 24px;
-  transform: translateX(-50%);
-}
-    
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
-`,
-    },
-  {
-    id: "lrd-grw-crl",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 5px solid #FFF;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  position: relative;
-  animation: pulse 1s linear infinite;
-}
-.loader:after {
-  content: '';
-  position: absolute;
-  width: 48px;
-  height: 48px;
-  border: 5px solid #FFF;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  animation: scaleUp 1s linear infinite;
-}
-
-@keyframes scaleUp {
-  0% { transform: translate(-50%, -50%) scale(0) }
-  60% , 100% { transform: translate(-50%, -50%)  scale(1)}
-}
-@keyframes pulse {
-  0% , 60% , 100%{ transform:  scale(1) }
-  80% { transform:  scale(1.2)}
-}
-`,
-    },
-    
-    {
-        id: "0wvsnoj54ldc",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  border: 2px solid #FFF;
-  position: absolute;
-  left: 0;
-  top: 0;
-  animation: animloader 2s linear infinite;
-}
-.loader::after {
-  animation-delay: 1s;
-}
-
-@keyframes animloader {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-`,
-    }, {
-        id: "1fyru3jzcwm",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 5px dotted #FFF;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 2s linear infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, 
-    
-  {
-    id: "bblRgAl",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  color: #fff;
-  font-size: 10px;
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  position: relative;
-  text-indent: -9999em;
-  animation: mulShdSpin 1.3s infinite linear;
-  transform: translateZ(0);
-}
-
-@keyframes mulShdSpin {
-  0%,
-  100% {
-    box-shadow: 0 -3em 0 0.2em, 
-    2em -2em 0 0em, 3em 0 0 -1em, 
-    2em 2em 0 -1em, 0 3em 0 -1em, 
-    -2em 2em 0 -1em, -3em 0 0 -1em, 
-    -2em -2em 0 0;
-  }
-  12.5% {
-    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 
-    3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, 
-    -2em 2em 0 -1em, -3em 0 0 -1em, 
-    -2em -2em 0 -1em;
-  }
-  25% {
-    box-shadow: 0 -3em 0 -0.5em, 
-    2em -2em 0 0, 3em 0 0 0.2em, 
-    2em 2em 0 0, 0 3em 0 -1em, 
-    -2em 2em 0 -1em, -3em 0 0 -1em, 
-    -2em -2em 0 -1em;
-  }
-  37.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
-     3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, 
-     -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
-  }
-  50% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
-     3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, 
-     -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
-  }
-  62.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
-     3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, 
-     -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
-  }
-  75% {
-    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 
-    3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
-    -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
-  }
-  87.5% {
-    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 
-    3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
-    -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
-  }
-}
-  `,
-  },
-
-{
-  id: "bbMtAls",
-  html: `<span class="loader"></span>`,
-  css: `.loader {
-  font-size: 10px;
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  position: relative;
-  text-indent: -9999em;
-  animation: mulShdSpin 1.1s infinite ease;
-  transform: translateZ(0);
-}
-@keyframes mulShdSpin {
-  0%,
-  100% {
-    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.5), -1.8em -1.8em 0 0em rgba(255,255,255, 0.7);
-  }
-  12.5% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.5);
-  }
-  25% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.5), 1.8em -1.8em 0 0em rgba(255,255,255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
-  }
-  37.5% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.5), 2.5em 0em 0 0em rgba(255,255,255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
-  }
-  50% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.5), 1.75em 1.75em 0 0em rgba(255,255,255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
-  }
-  62.5% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.5), 0em 2.5em 0 0em rgba(255,255,255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
-  }
-  75% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.5), -1.8em 1.8em 0 0em rgba(255,255,255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
-  }
-  87.5% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.5), -2.6em 0em 0 0em rgba(255,255,255, 0.7), -1.8em -1.8em 0 0em #ffffff;
-  }
-}
-`,
-},
-    {
-      id: "bbMlShinf",
-      html: `<span class="loader"></span>`,
-      css: `.loader {
-  color: #ffffff;
-  font-size: 45px;
-  text-indent: -9999em;
-  overflow: hidden;
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  position: relative;
-  transform: translateZ(0);
-  animation: mltShdSpin 1.7s infinite ease, round 1.7s infinite ease;
-}
-
-@keyframes mltShdSpin {
-  0% {
-    box-shadow: 0 -0.83em 0 -0.4em,
-    0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
-    0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
-  }
-  5%,
-  95% {
-    box-shadow: 0 -0.83em 0 -0.4em, 
-    0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 
-    0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
-  }
-  10%,
-  59% {
-    box-shadow: 0 -0.83em 0 -0.4em, 
-    -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, 
-    -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
-  }
-  20% {
-    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
-     -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, 
-     -0.749em -0.34em 0 -0.477em;
-  }
-  38% {
-    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
-     -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, 
-     -0.82em -0.09em 0 -0.477em;
-  }
-  100% {
-    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 
-    0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
-  }
-}
-
-@keyframes round {
-  0% { transform: rotate(0deg) }
-  100% { transform: rotate(360deg) }
-}
- `,
-},
-
-    
-    {
-        id: "7en5eji78kt",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  background: linear-gradient(0deg, rgba(255, 61, 0, 0.2) 33%, #ff3d00 100%);
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  background: #263238;
-}
-@keyframes rotation {
-  0% { transform: rotate(0deg) }
-  100% { transform: rotate(360deg)}
-} `,
-    },
-
-  {
-    id: "spinxLigfrechand67",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        transform: rotateZ(45deg);
-        perspective: 1000px;
-        border-radius: 50%;
-        width: 48px;
-        height: 48px;
-        color: #fff;
-      }
-        .loader:before,
-        .loader:after {
-          content: '';
-          display: block;
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: inherit;
-          height: inherit;
-          border-radius: 50%;
-          transform: rotateX(70deg);
-          animation: 1s spin linear infinite;
-        }
-        .loader:after {
-          color: #FF3D00;
-          transform: rotateY(70deg);
-          animation-delay: .4s;
-        }
-
-      @keyframes rotate {
-        0% {
-          transform: translate(-50%, -50%) rotateZ(0deg);
-        }
-        100% {
-          transform: translate(-50%, -50%) rotateZ(360deg);
-        }
-      }
-
-      @keyframes rotateccw {
-        0% {
-          transform: translate(-50%, -50%) rotate(0deg);
-        }
-        100% {
-          transform: translate(-50%, -50%) rotate(-360deg);
-        }
-      }
-
-      @keyframes spin {
-        0%,
-        100% {
-          box-shadow: .2em 0px 0 0px currentcolor;
-        }
-        12% {
-          box-shadow: .2em .2em 0 0 currentcolor;
-        }
-        25% {
-          box-shadow: 0 .2em 0 0px currentcolor;
-        }
-        37% {
-          box-shadow: -.2em .2em 0 0 currentcolor;
-        }
-        50% {
-          box-shadow: -.2em 0 0 0 currentcolor;
-        }
-        62% {
-          box-shadow: -.2em -.2em 0 0 currentcolor;
-        }
-        75% {
-          box-shadow: 0px -.2em 0 0 currentcolor;
-        }
-        87% {
-          box-shadow: .2em -.2em 0 0 currentcolor;
-        }
-      }
-   `,
-    },
-    
-    
-    {
-        id: "2y7t3com146",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  border-top: 3px solid #FFF;
-  border-right: 3px solid transparent;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "vmout1ii0uh",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  border-top: 4px solid #FFF;
-  border-right: 4px solid transparent;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  border-bottom: 4px solid #FF3D00;
-  border-left: 4px solid transparent;
-}
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "8yvzqgag914",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  border-top: 4px solid #FFF;
-  border-right: 4px solid transparent;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  border-left: 4px solid #FF3D00;
-  border-bottom: 4px solid transparent;
-  animation: rotation 0.5s linear infinite reverse;
-}
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "p12aea9j53",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 5px solid;
-  border-color: #FF3D00 transparent;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "37zcnj0dwpi",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  border: 10px solid;
-  border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "loh338ayum",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  border: 10px solid;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite alternate;
-}
-@keyframes animloader {
-  0% {
-    border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
-  }
-  33% {
-    border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
-  }
-  66% {
-    border-color: white white white rgba(255, 255, 255, 0);
-  }
-  100% {
-    border-color: white white white white;
-  }
-} `,
-    },
-    
-  {
-    id: "donut-fillClip-st",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-      width: 48px;
-      height: 48px;
-      border:10px solid #FFF;
-      border-radius: 50%;
-      position: relative;
-      transform:rotate(45deg);
-      box-sizing: border-box;
-    }
-    .loader::before {
-      content: "";
-      position: absolute;
-      box-sizing: border-box;
-      inset:-10px;
-      border-radius: 50%;
-      border:10px solid #FF3D00;
-      animation: prixClipFix 2s infinite linear;
-    }
-
-    @keyframes prixClipFix {
-        0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-        25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-        50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-        75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
-        100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
-    }
-      `
-    },
-  {
-    id: "crlFillBtm",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 64px;
-    height: 64px;
-    background: #fff;
-    border-radius: 50%;
-    overflow: hidden;
-  }
-  .loader:after{
-    content: '';
-    position: absolute;
-    inset: 8px;
-    margin: auto;
-    background: #222b32;
-     border-radius: 50%;
-  }
-  .loader:before{
-    content: '';
-    position: absolute;
-    inset: 0px;
-    margin: auto;
-    background: #de3500;
-    animation: crlMugLoader 2s linear infinite alternate;
-  }
-  @keyframes crlMugLoader {
-    0%  ,10% { transform: translateY(64px) }
-    90% , 100% { transform: translateY(0px) }
-  }
-      `
-    },
-  {
-    id: "hlafDnSpn",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    width: 70px;
-    height: 35px;
-    position: relative;
-    overflow: hidden;
-  }
-  .loader:before {
-    content: "";
-    width: 70px;
-    height: 70px;
-    position: absolute;
-    left: 0;
-    top: 0;
-    border: 5px solid #0000;
-    border-color: #fff #fff #0000 #0000;
-    border-radius: 50%;
-    box-sizing: border-box;
-    animation: rotate 3s ease-in-out infinite;
-    transform: rotate(-200deg);
-  }
-  @keyframes rotate {
-    0% {
-      border-width: 10px;
-    }
-    25% {
-      border-width: 3px;
-    }
-    50% {
-      transform: rotate(115deg);
-      border-width: 10px;
-    }
-    75% {
-      border-width: 3px;
-    }
-    100% {
-      border-width: 10px;
-    }
-  }
-      `
-    },
-    
-    
-    {
-        id: "aji4vwmkdk",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 3px solid #FFF;
-  border-bottom-color: transparent;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  position: absolute;
-  box-sizing: border-box;
-  left: 20px;
-  top: 31px;
-  border: 10px solid transparent;
-  border-right-color: #FFF;
-  transform: rotate(-40deg);
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "c430xwqb2e5",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border-width: 3px;
-  border-style: dashed solid  solid dotted;
-  border-color: #FF3D00 #FF3D00 transparent #FF3D00;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 20px;
-  top: 31px;
-  border: 10px solid transparent;
-  border-right-color: #FF3D00;
-  transform: rotate(-40deg);
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
-
-`,
-    },
-  {
-    id: "refArw2sd",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    width: 48px;
-    height: 48px;
-    display: inline-block;
-    position: relative;
-    border: 3px solid;
-    border-color:#de3500 #0000 #fff #0000;
-    border-radius: 50%;
-    box-sizing: border-box;
-    animation: 1s rotate linear infinite;
- }
- .loader:before , .loader:after{
-    content: '';
-    top: 0;
-    left: 0;
-    position: absolute;
-    border: 10px solid transparent;
-    border-bottom-color:#fff;
-    transform: translate(-10px, 19px) rotate(-35deg);
-  }
- .loader:after {
-    border-color: #de3500 #0000 #0000 #0000 ;
-    transform: translate(32px, 3px) rotate(-35deg);
-  }
-   @keyframes rotate {
-    100%{    transform: rotate(360deg)}
-  }
-`,
-    },
-
-  {
-    id: "refArw2sdDot",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    width: 48px;
-    height: 48px;
-    display: inline-block;
-    position: relative;
-    border-width: 3px 2px 3px 2px;
-    border-style: solid dotted solid dotted;
-    border-color: #de3500 rgba(255, 255, 255,0.3) #fff rgba(151, 107, 93, 0.3);
-    border-radius: 50%;
-    box-sizing: border-box;
-    animation: 1s rotate linear infinite;
- }
- .loader:before , .loader:after{
-    content: '';
-    top: 0;
-    left: 0;
-    position: absolute;
-    border: 10px solid transparent;
-    border-bottom-color:#fff;
-    transform: translate(-10px, 19px) rotate(-35deg);
-  }
- .loader:after {
-    border-color: #de3500 #0000 #0000 #0000 ;
-    transform: translate(32px, 3px) rotate(-35deg);
-  }
-   @keyframes rotate {
-    100%{    transform: rotate(360deg)}
-  }
-`,
-    },
-
-
-    {
-        id: "0pyhri7feqdc",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  background: #FFF;
-  display: inline-block;
-  border-radius: 50%;
-  box-sizing: border-box;
-  animation: animloader 1s ease-in infinite;
-}
-
-@keyframes animloader {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-} `,
-    }, {
-        id: "kvwtna29uw",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background: #FFF;
-  position: absolute;
-  left: 0;
-  top: 0;
-  animation: animloader 2s linear infinite;
-}
-.loader::after {
-  animation-delay: 1s;
-}
-
-@keyframes animloader {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-    `,
-    }, {
-        id: "1uv5glsyeok",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-    width: 48px;
-    height: 48px;
-    display: inline-block;
-    position: relative;
-  }
-  .loader::after,
-  .loader::before {
-    content: '';  
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background: #FFF;
-    position: absolute;
-    left: 0;
-    top: 0;
-    box-sizing: border-box;
-    animation: animloader 2s ease-in-out infinite;
-  }
-  .loader::after {
-    animation-delay: 1s;
-  }
-
-@keyframes animloader {
-    0%, 100% {
-      transform: scale(0);
-      opacity: 1;
-}
-    50% {
-      transform: scale(1);
-      opacity: 0;
-}
-  }
-  `,
-    },
-
-  {
-    id: "rippleBlixShd",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 8px;
-  height: 8px;
-  position: relative;
-  border-radius: 50%;
-  background: #fff;
-  animation: wave 1s ease-in infinite;
-}
-
-@keyframes wave {
- 0% {  box-shadow:
-  0 0 0 0px rgba(255, 255,255, 1),
-  0 0 0 20px rgba(255, 255,255, 0.2),
-  0 0 0 40px rgba(255, 255,255, 0.6),
-  0 0 0 60px rgba(255, 255,255, 0.4),
-  0 0 0 80px rgba(255, 255,255, 0.2)
-  }
-  100% {  box-shadow:
-    0 0 0 80px rgba(255, 255,255, 0),
-    0 0 0 60px rgba(255, 255,255, 0.2),
-    0 0 0 40px rgba(255, 255,255, 0.4),
-    0 0 0 20px rgba(255, 255,255, 0.6),
-    0 0 0 0px rgba(255, 255,255, 1)
-  }
-}
-
-
-  `,
-    },
-
-  {
-    id: "vishuChakra",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        font-size:48px;
-        color: #FFF;
-        width: 1em;
-        height: 1em;
-        box-sizing: border-box;
-        background-color: currentcolor;
-        position: relative;
-        border-radius: 50%;
-        transform: rotateX(-60deg) perspective(1000px);
-      }
-      .loader:before,
-      .loader:after {
-        content: '';
-        display: block;
-        position: absolute;
-        box-sizing: border-box;
-        top: 0;
-        left: 0;
-        width: inherit;
-        height: inherit;
-        border-radius: inherit;
-        animation: flowerFlow 1s ease-out infinite;
-      }
-      .loader:after {
-        animation-delay: .4s;
-      }
-
-      @keyframes flowerFlow {
-        0% {
-          opacity: 1;
-          transform: rotate(0deg);
-          box-shadow: 0 0 0 -.5em currentcolor,
-          0 0 0 -.5em currentcolor,
-          0 0 0 -.5em currentcolor,
-          0 0 0 -.5em currentcolor,
-          0 0 0 -.5em currentcolor,
-          0 0 0 -.5em currentcolor,
-          0 0 0 -.5em currentcolor,
-          0 0 0 -.5em currentcolor;
-        }
-        100% {
-          opacity: 0;
-          transform: rotate(180deg);
-          box-shadow: -1em -1em 0 -.35em currentcolor,
-          0 -1.5em 0 -.35em currentcolor,
-          1em -1em 0 -.35em currentcolor,
-          -1.5em 0 0 -.35em currentcolor,
-          1.5em -0 0 -.35em currentcolor,
-          -1em 1em 0 -.35em currentcolor,
-          0 1.5em 0 -.35em currentcolor,
-          1em 1em 0 -.35em currentcolor;
-        }
-      }
-      `,
-    },
-
-  {
-    id: "chkarBlast",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 48px;
-  height: 48px;
-  position: relative;
-}
-.loader::before , .loader::after{
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50% , -50%);
-  width: 48em;
-  height: 48em;
-  background-image:
-    radial-gradient(circle 10px, #FFF 100%, transparent 0),
-    radial-gradient(circle 10px, #FFF 100%, transparent 0),
-    radial-gradient(circle 10px, #FFF 100%, transparent 0),
-    radial-gradient(circle 10px, #FFF 100%, transparent 0),
-    radial-gradient(circle 10px, #FFF 100%, transparent 0),
-    radial-gradient(circle 10px, #FFF 100%, transparent 0),
-    radial-gradient(circle 10px, #FFF 100%, transparent 0),
-    radial-gradient(circle 10px, #FFF 100%, transparent 0);
-  background-position: 0em -18em, 0em 18em, 18em 0em, -18em 0em,
-                       13em -13em, -13em -13em, 13em 13em, -13em 13em;
-    background-repeat: no-repeat;
-  font-size: 0.5px;
-  border-radius: 50%;
-  animation: blast 1s ease-in infinite;
-}
-.loader::after {
-  font-size: 1px;
-  background: #fff;
-  animation: bounce 1s ease-in infinite;
-}
-
-@keyframes bounce {
-  0% , 100%{ font-size: 0.75px }
-  50% { font-size: 1.5px }
-}
-@keyframes blast {
-  0% , 40% {
-    font-size: 0.5px;
-  }
-  70% {
-    opacity: 1;
-    font-size: 4px;
-  }
-   100% {
-     font-size: 6px;
-    opacity: 0;
-  }
-}
-`,
-    },
-  {
-    id: "spnkInfBablRot",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: calc(100px - 24px);
-  height: 50px;
-  position: relative;
-  animation: flippx 2s infinite linear;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  margin: auto;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #FFF;
-  transform-origin: -24px 50%;
-  animation: spin 1s infinite linear;
-}
-.loader:after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50% , -50%);
-  background: #fff;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-}
-
-@keyframes flippx {
-  0%, 49% {
-    transform: scaleX(1);
-  }
-  50%, 100% {
-    transform: scaleX(-1);
-  }
-}
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-      `,
-    },
-  {
-    id: "fl-rl3d-crl",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    margin: auto;
-    box-sizing: border-box;
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    border: 4px solid rgba(255, 255, 255, 0.1);
-    transform-origin: 50% 50%;
-    transform: perspective(200px) rotateX(66deg);
-    animation: spinner-wiggle 1.2s infinite;
-  }
-  .loader:before,
-  .loader:after {
-    content: "";
-    position: absolute;
-    inset: -4px;
-    border-radius: 50%;
-    box-sizing: border-box;
-    border: 4px solid #0000;
-    animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite,
-      spinner-fade 1.2s linear infinite;
-  }
-  .loader:before {
-    border-top-color: #fff;
-  }
-  .loader:after {
-    border-top-color: #ff3d00;
-    animation-delay: 0.4s;
-  }
-
-  @keyframes spinner-spin {
-    100% { transform: rotate(360deg)}
-  }
-  @keyframes spinner-fade {
-    25%, 75% { opacity: 0.1}
-    50% { opacity: 1 }
-  }
-      `,
-    },
-  {
-    id: "moon-around-light",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    width: 100px;
-    height: 100px;
-    background: linear-gradient(
-      165deg,
-      rgba(255, 255, 255, 1) 0%,
-      rgb(220, 220, 220) 40%,
-      rgb(170, 170, 170) 98%,
-      rgb(10, 10, 10) 100%
-    );
-    border-radius: 50%;
-    position: relative;
-  }
-
-  .loader:before {
-    position: absolute;
-    content: "";
-    width: 100%;
-    height: 100%;
-    border-radius: 100%;
-    border-bottom: 0 solid #ffffff05;
-    box-shadow: 0 -10px 20px 20px #ffffff40 inset,
-      0 -5px 15px 10px #ffffff50 inset, 0 -2px 5px #ffffff80 inset,
-      0 -3px 2px #ffffffbb inset, 0 2px 0px #ffffff, 0 2px 3px #ffffff,
-      0 5px 5px #ffffff90, 0 10px 15px #ffffff60, 0 10px 20px 20px #ffffff40;
-    filter: blur(3px);
-    animation: 2s rotate linear infinite;
-  }
-
-  @keyframes rotate {
-    100% { transform: rotate(360deg) }
-  }
-      `,
-    },
-  {
-    id: "ring-light",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    max-width: 6rem;
-    margin-top: 3rem;
-    margin-bottom: 3rem;
-  }
-  .loader:before,
-  .loader:after {
-    content: "";
-    position: absolute;
-    border-radius: 50%;
-    animation: pulsOut 1.8s ease-in-out infinite;
-    filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
-  }
-  .loader:before {
-    width: 100%;
-    padding-bottom: 100%;
-    box-shadow: inset 0 0 0 1rem #fff;
-    animation-name: pulsIn;
-  }
-  .loader:after {
-    width: calc(100% - 2rem);
-    padding-bottom: calc(100% - 2rem);
-    box-shadow: 0 0 0 0 #fff;
-  }
-
-  @keyframes pulsIn {
-    0% {
-      box-shadow: inset 0 0 0 1rem #fff;
-      opacity: 1;
-    }
-    50%, 100% {
-      box-shadow: inset 0 0 0 0 #fff;
-      opacity: 0;
-    }
-  }
-
-  @keyframes pulsOut {
-    0%, 50% {
-      box-shadow: 0 0 0 0 #fff;
-      opacity: 0;
-    }
-    100% {
-      box-shadow: 0 0 0 1rem #fff;
-      opacity: 1;
-    }
-  }
-      `,
-    },
-  {
-    id: "ringMolt",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-  width: 100px;
-  height: 100px;
-}
-
-.loader:before , .loader:after{
-  content: '';
-  border-radius: 50%;
-  position: absolute;
-  inset: 0;
-  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
-}
-.loader:after {
-  box-shadow: 0 2px 0 #FF3D00 inset;
-  animation: rotate 2s linear infinite;
-}
-
-@keyframes rotate {
-  0% {  transform: rotate(0)}
-  100% { transform: rotate(360deg)}
-}`,
-    },
-
-
-
-
-  {
-    id: "ranDrpBblHrflx",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 32px;
-  height: 32px;
-  transform: translateY(100%);
-  border-radius: 50%;
-  background: #FFF;
-  position: relative;
-}
-.loader:before , .loader:after{
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background: #FFF;
-  left: 50%;
-  transform: translateX(-50%);
-  top: -200%;
-}
-.loader:after {
-  animation: moveX 0.5s infinite linear alternate;
-}
-
-@keyframes moveX {
-  0% {
-    top: 0% ;
-    transform: translateX(-50%) scale(1.5);
-  }
-  50% {
-    top: -75% ;
-    transform: translateX(-50%) scale(0.5);
-  }
-  100% {
-    top: -200%;
-    transform: translateX(-50%) scale(1.5);
-  }
-}
-      `,
-    },
-    
-    {
-        id: "coin-flip-b8sp",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-          display: inline-block;
-          transform: translateZ(1px);
-        }
-        .loader:after {
-          content: '';
-          display: inline-block;
-          width: 48px;
-          height: 48px;
-          margin: 8px;
-          border-radius: 50%;
-          background: #fff;
-          animation: coin-flip 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-        }
-        @keyframes coin-flip {
-          0%, 100% {
-            animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
-          }
-          0% {
-            transform: rotateY(0deg);
-          }
-          50% {
-            transform: rotateY(1800deg);
-            animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
-          }
-          100% {
-            transform: rotateY(3600deg);
-          }
-        }
-      }
-    `,
-    }, 
-
-    
-    {
-        id: "b8sr9u8olsp",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: -72px 0 #FFF inset;
-  }
-  100% {
-    box-shadow: 48px 0 #FFF inset;
-  }
-}
-    `,
-    }, 
-    {
-        id: "bbl-ptl-flip",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  position: relative;
-  perspective: 500px;
-}
-.loader:before , .loader:after {
-  content: "";
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 24px;
-  height: 48px;
-  background: #FF3D00;
-  border-radius: 0 24px 24px 0;
-  transform-origin: 0 0;
-  animation: flip 2s linear infinite alternate;
-}
-.loader:after {
-  left: 0;
-  border-radius: 24px 0 0 24px;
-  transform-origin: 100% 0;
-  animation-delay: 1s;
-}
-
-@keyframes flip {
-    0% , 10% { transform: rotateY(0deg)}
-    90%, 100% { transform: rotateY(-180deg)}
-}
-
-    `,
-    }, 
-    
-    
-    {
-        id: "pie-sprix-fill",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-            position: relative;
-            border:24px solid #0000;
-            border-radius:50%;
-            animation: piefill 2s linear infinite;
-          }
-
-          @keyframes piefill {
-            0% , 19%{ border-color: #0000 #0000 #0000 #0000 }
-            20% , 39%{ border-color: #fff #0000 #0000 #0000 }
-            40% , 59%{ border-color: #fff #fff #0000 #0000 }
-            60% , 79%{ border-color: #fff #fff #fff #0000 }
-            80% , 100% { border-color: #fff #fff #fff #fff }
-
-          }
-`,
-    },
-    
-    {
-        id: "pie-sprix-fill",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-          position: relative;
-          border:24px solid #FFF;
-          border-radius:50%;
-          transform: rotate(45deg);
-          animation: pieFill 3s linear infinite;
-        }
-
-        @keyframes pieFill {
-          0% , 19%{ border-color: #FFF #FFF #FFF #FFF }
-          20% , 39%{ border-color: #FF3D00 #FFF #FFF #FFF }
-          40% , 59%{ border-color: #FF3D00 #FF3D00 #FFF #FFF }
-          60% , 79%{ border-color: #FF3D00 #FF3D00 #FF3D00 #FFF }
-          80% , 100% { border-color: #FF3D00 #FF3D00 #FF3D00 #FF3D00 }
-        }
-`,
-    },
-    
-    {
-        id: "pie-sprixEase-fill",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-            width: 48px;
-            height: 48px;
-            border-radius: 50%;
-            position: relative;
-            transform:rotate(45deg);
-            background: #fff;
-          }
-          .loader::before {
-            content: "";
-            box-sizing: border-box;
-            position: absolute;
-            inset: 0px;
-            border-radius: 50%;
-            border:24px solid #FF3D00;
-            animation: prixClipFix 2s infinite linear;
-          }
-
-          @keyframes prixClipFix {
-              0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-              25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-              50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-              75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
-              100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
-          }
-      `,
-    },
-
-
-
-    {
-        id: "kyaj4z490z",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  border: 24px solid #FFF;
-  border-bottom-color: #FF3D00;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    },
-    
-    
-    
-    
-    {
-        id: "3j5s0xdxrpk",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  border: 2px solid #FFF;
-  width: 48px;
-  height: 48px;
-  background: #FF3D00;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 2s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  border: 24px solid;
-  border-color: transparent #FFF;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    },
-    
-    
-
-  {
-    id: "skXsenRx78",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-          border: 24px solid #FFF;
-          border-color: #FF3D00 #FF3D00 #fff #fff;
-          border-radius: 50%;
-          position: relative;
-          animation: rotate 1s linear infinite
-        }
-
-        .loader:before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            transform: translate(-50% , -125%);
-            left: 50%;
-            width: 12px;
-            height: 12px;
-            background: #fff;
-            border-radius: 50%;
-          }
-        @keyframes rotate {
-          100%   { transform: rotate(360deg)}
-        }
-`,
-  },
-  {
-    id: "thon1SqrAttam",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-  width: 64px;
-  height: 60px;
-}
-.loader::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  background: #fff;
-  width: 64px;
-  height: 32px;
-  border-radius: 0 0 50px 50px;
-  animation: move 0.5s linear infinite alternate;
-}
-.loader::before {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 0;
-  background: #FF3D00;
-  width: 24px;
-  height: 24px;
-  transform: translateX(-50%) rotate(0deg);
-  animation: rotate 2s linear infinite;
-}
-
-@keyframes rotate {
-  100% { transform: translateX(-50%) rotate(360deg)}
-}
-@keyframes move {
-  0% { transform: rotate(10deg)}
-  100% { transform: rotate(-10deg)}
-}
-      `,
-  },
-  {
-    id: "crlHlfVadiKotadi",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 64px;
-  height: 64px;
-  position: relative;
-  animation: rotate 1.5s ease-in infinite alternate;
-}
-.loader::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  color: #FF3D00;
-  background: currentColor;
-  width: 64px;
-  height: 32px;
-  border-radius: 0 0 50px 50px;
-}
-.loader::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 10%;
-  background: #FFF;
-  width: 8px;
-  height: 64px;
-  animation: rotate 1.2s linear infinite alternate-reverse;
-}
-
-@keyframes rotate {
-  100% { transform: rotate(360deg)}
-}
-      `,
-  },
-
-  {
-    id: "fill-in-linspin",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    width: 48px;
-    height: 48px;
-    background: #fff;
-    border-radius: 50%;
-    position: relative;
-    animation: skLinRotate 1s ease-in-out infinite alternate;
-  }
-  .loader:after{
-    content:"";
-    position: absolute;
-    inset: 5px;
-    border-radius: 50%;
-    border: 5px solid transparent;
-    border-top-color: #ff3d00;
-  }
-  @keyframes skLinRotate {
-    95% ,100% { transform: rotate(840deg) }
-  }
-`,
-  },
-
-  {
-    id: "fill-ln-roll",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    width: 48px;
-    height: 48px;
-    background: #fff;
-    border-radius: 50%;
-    position: relative;
-    animation: roll 1s ease-in-out infinite alternate;
-  }
-  .loader:after{
-    content:"";
-    position: absolute;
-    inset: 5px;
-    border-radius: 50%;
-    border: 5px solid ;
-    border-color: #ff3d00 transparent;
-  }
-  @keyframes roll {
-    0% {
-      transform: translateX(-150%) rotate(0deg) ;
-    }
-    100% {
-      transform:  translateX(150%) rotate(360deg);
-    }
-  }
-`,
-  },
-    
-    {
-        id: "s38s0s6yor",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  background: #FFF;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 6px;
-  top: 10px;
-  width: 12px;
-  height: 12px;
-  color: #FF3D00;
-  background: currentColor;
-  border-radius: 50%;
-  box-shadow: 25px 2px, 10px 22px;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
-`,
-    }, 
-    
-    
-    {
-        id: "plq3zs4xio",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  border: 4px solid;
-  background: rgba(255, 255, 255, 0.2);
-  border-color: transparent #FFF #FFF transparent;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s ease-in-out infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  border: 12px solid;
-  border-color: transparent #FF3D00 #FF3D00 transparent;
-  transform: translate(-50%, -50%);
-  border-radius: 50%;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "4s7pe8rbfi5",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  border: 2px solid;
-  border-color: transparent #FFF;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 2s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  border: 24px solid;
-  border-color: transparent rgba(255, 255, 255, 0.15);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "h1sn6rg6uyh",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-    border: 24px solid;
-    border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
-    border-radius: 50%;
-    display: inline-block;
-    box-sizing: border-box;
-    animation: animloader 1s linear infinite;
-  }
-
-@keyframes animloader {
-    0% {
-      border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75);
-}
-    33% {
-      border-color: rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35);
-}
-    66% {
-      border-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25);
-}
-    100% {
-      border-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15);
-}
-  }
-  
-  `,
-    }, 
-
-
-  {
-    id: "potRoteBuble2x",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 64px;
-  height: 64px;
-  position: relative;
-  border-radius: 50%;
-  box-shadow: -10px 8px 0 18px inset #fff;
-  animation: rotate 2s ease-in infinite alternate;
-}
-.loader::before {
-  content: '';
-  position: absolute;
-  left: 14px;
-  bottom: 16px;
-  background: #FF3D00;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  animation: scale 1s ease-in infinite alternate;
-}
-@keyframes rotate {
-  100% { transform: rotate(750deg)}
-}
-@keyframes scale {
- 100% { transform: scale(0.5) translateY(5px)}
-}
-  `,
-    }, 
-
-
-
-
-  {
-    id: "clircleSpderX3",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-      width: 64px;
-      height: 64px;
-      border-radius: 50%;
-      position: relative;
-      background: rgba(255, 255, 255, 0.8);
-    }
-    .loader:before , .loader:after {
-      content: "";
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 64px;
-      height: 64px;
-      border-radius: 50%;
-      background: #FFF;
-      animation: slide 1s infinite linear alternate;
-      opacity: 0.5;
-    }
-    .loader:after {
-      animation: slide2 1s infinite linear alternate;
-      opacity: 1;
-
-    }
-    @keyframes slide {
-      0% , 20% {  transform: translate(0, 0)  }
-      80% , 100% { transform: translate(15px, 15px) }
-    }
-    @keyframes slide2 {
-      0% , 20% {  transform: translate(0, 0) }
-      80% , 100% { transform: translate(-15px, -15px) }
-    }
-  `,
-  },
-
-
-  {
-    id: "bbl2TrnsSpltMv",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 64px;
-  height: 48px;
-  position: relative;
-  animation: split 1s ease-in infinite alternate;
-}
-.loader::before , .loader::after {
-  content: '';
-  position: absolute;
-  height: 48px;
-  width: 48px;
-  border-radius: 50%;
-  left: 0;
-  top: 0;
-  transform: translateX(-10px);
-  background: #FF3D00;
-  opacity: 0.75;
-  backdrop-filter: blur(20px);
-}
-
-.loader::after {
-  left: auto;
-  right: 0;
-  background: #FFF;
-  transform: translateX(10px);
-}
-
-@keyframes split {
- 0% , 25%{ width: 64px }
- 100%{ width: 148px }
-}
-  `,
-  },
-
-
-  {
-    id: "bbule2pUshpPlusering",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-      width: 84px;
-      height: 84px;
-      position: relative;
-    }
-    .loader:before , .loader:after {
-      content: "";
-      position: absolute;
-      left: 50%;
-      bottom: 0;
-      width:64px;
-      height: 64px;
-      border-radius: 50%;
-      background:#FFF;
-      transform: translate(-50% , -100%)  scale(0);
-      animation: push 2s infinite linear;
-    }
-    .loader:after {
-      animation-delay: 1s;
-    }
-    @keyframes push {
-        0% , 50%{ transform: translate(-50% , 0%)  scale(1) }
-      100% { transform: translate(-50%, -100%) scale(0) }
-    }
-  `,
-    }, 
-
-  {
-    id: "bubblePushBack2ls",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        width: 84px;
-        height: 84px;
-        position: relative;
-      }
-      .loader:before , .loader:after {
-        content: "";
-        position: absolute;
-        right: 0;
-        top: 0;
-        width:84px;
-        height: 84px;
-        border-radius: 50%;
-        background:#FF3D00;
-        animation: push 1s infinite linear alternate;
-      }
-      .loader:after {
-        top: auto;
-        bottom: 0;
-        left: 0;
-        background: #fff;
-        animation-direction: alternate-reverse;
-      }
-      @keyframes push {
-          0% {
-            width:14px;
-            height: 14px;
-          }
-          100% {
-            width:84px;
-            height: 84px;
-          }
-      }
-  `,
-    }, 
-  {
-    id: "userPushBackCrl",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        width: 84px;
-        height: 84px;
-        position: relative;
-        overflow: hidden;
-      }
-      .loader:before , .loader:after {
-        content: "";
-        position: absolute;
-        left: 50%;
-        bottom: 0;
-        width:64px;
-        height: 64px;
-        border-radius: 50%;
-        background:#FFF;
-        transform: translate(-50% , 100%)  scale(0);
-        animation: push 2s infinite ease-in;
-      }
-      .loader:after {
-      animation-delay: 1s;
-      }
-      @keyframes push {
-          0% {
-            transform: translate(-50% , 100%)  scale(1);
-          }
-          15% , 25%{
-            transform: translate(-50% , 50%)  scale(1);
-          }
-        50% , 75% {
-            transform: translate(-50%, -30%) scale(0.5);
-          }
-        80%,  100% {
-            transform: translate(-50%, -50%) scale(0);
-          }
-      }
-  `,
-    }, 
-  {
-    id: "bbClrTLin",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 100px;
-    height: 100px;
-  }
-  .loader:before{
-    content: '';
-    position: absolute;
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    top: 50%;
-    left: 0;
-    transform: translate(-5px, -50%);
-    background: linear-gradient(to right, #fff 50%, #de3500 50%) no-repeat;
-    background-size: 200% auto;
-    background-position: 100% 0;
-    animation: colorBallMoveX 1.5s linear infinite alternate;
-  }
- .loader:after{
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translateX(-50%);
-    width: 2px;
-    height: 100%;
-    background: #de3500;
- }
-@keyframes colorBallMoveX {
-  0%  {
-    background-position: 0% 0;
-    transform: translate(-15px, -50%);
-  }
-  15%  , 25% {
-    background-position: 0% 0;
-    transform: translate(0px, -50%);
-  }
-  75% , 85% {
-    background-position: 100% 0;
-    transform: translate(50px, -50%);
-  }
-  100% {
-    background-position: 100% 0;
-    transform: translate(65px, -50%);
-  }
-}
-  `,
-    }, 
-
-
-  {
-    id: "doduSpiBablFil",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 32px;
-  height: 32px;
-  position: relative;
-  border-radius: 50%;
-  color: #FF3D00;
-  animation: fill 1s ease-in infinite alternate;
-}
-.loader::before , .loader::after {
-  content: '';
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  border-radius: 50%;
-  left: 48px;
-  top: 0;
-  animation: fill 0.9s ease-in infinite alternate;
-}
-
-.loader::after {
-  left: auto;
-  right: 48px;
-  animation-duration: 1.1s;
-}
-
-@keyframes fill {
- 0% {  box-shadow: 0 0 0 2px inset }
- 100%{ box-shadow: 0 0 0 10px inset }
-}
-  `,
-    }, 
-    
-  
-    
-    {
-        id: "im0eqyxwqhs",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    display: block;
-    margin:15px auto;
-    position: relative;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-  }
-  .loader::after,
-  .loader::before {
-    content: '';  
-    box-sizing: border-box;
-    position: absolute;
-    left: 0;
-    top: 0;
-    background: #FF3D00;
-    width: 16px;
-    height: 16px;
-    transform: translate(-50%, 50%);
-    border-radius: 50%;
-  }
-  .loader::before {
-    left: auto;
-    right: 0;
-    background: #FFF;
-    transform: translate(50%, 100%);
-  }
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }
-]
\ No newline at end of file
diff --git a/js/loaders/graph.js b/js/loaders/graph.js
deleted file mode 100644
index 4941689..0000000
--- a/js/loaders/graph.js
+++ /dev/null
@@ -1,1207 +0,0 @@
-export const GRAPH = [
-  
-  {
-    id: "clipBrdFill",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 100px;
-    height: 130px;
-    background: #fff;
-    border-radius: 4px;
-  }
-  .loader:before{
-    content: '';
-    position: absolute;
-    width: 54px;
-    height: 25px;
-    left: 50%;
-    top: 0;
-    background-image:
-    radial-gradient(ellipse at center, #0000 24%,#de3500 25%,#de3500 64%,#0000 65%),
-    linear-gradient(to bottom, #0000 34%,#de3500 35%);
-    background-size: 12px 12px , 100% auto;
-    background-repeat: no-repeat;
-    background-position: center top;
-    transform: translate(-50% , -65%);
-    box-shadow: 0 -3px rgba(0, 0, 0, 0.25) inset;
-  }
- .loader:after{
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 20%;
-    transform: translateX(-50%);
-    width: 66%;
-    height: 60%;
-    background: linear-gradient(to bottom, #f79577 30%, #0000 31%);
-    background-size: 100% 16px;
-    animation: writeDown 2s ease-out infinite;
- }
-
- @keyframes writeDown {
-    0% { height: 0%; opacity: 0;}
-    20%{ height: 0%; opacity: 1;}
-    80% { height: 65%; opacity: 1;}
-    100% { height: 65%; opacity: 0;}
- }
-      `,
-  },
-
-  {
-    id: "bookPagging",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-          width: 200px;
-          height: 140px;
-          background: #979794;
-          box-sizing: border-box;
-          position: relative;
-          border-radius:8px;
-          perspective: 1000px;
-        }
-
-        .loader:before{
-          content: '';
-          position: absolute;
-          left: 10px;
-          right: 10px;
-          top: 10px;
-          bottom: 10px;
-          border-radius:8px;
-          background: #f5f5f5  no-repeat;
-          background-size: 60px 10px;
-          background-image: 	linear-gradient(#ddd 100px, transparent 0) ,
-                    linear-gradient(#ddd 100px, transparent 0), 
-                    linear-gradient(#ddd 100px, transparent 0), 
-                    linear-gradient(#ddd 100px, transparent 0), 
-                    linear-gradient(#ddd 100px, transparent 0), 
-                    linear-gradient(#ddd 100px, transparent 0);
-          
-          background-position: 15px 30px , 15px 60px , 15px 90px, 
-                    105px 30px , 105px 60px , 105px 90px;
-          box-shadow: 0 0 10px rgba(0,0,0,0.25);
-        }
-        .loader:after {
-          content: '';
-            position: absolute;
-            width: calc(50% - 10px);
-            right: 10px;
-            top: 10px;
-            bottom: 10px;
-            border-radius: 8px;
-            background: #fff no-repeat;
-            background-size: 60px 10px;
-            background-image: linear-gradient(#ddd 100px, transparent 0), 
-                    linear-gradient(#ddd 100px, transparent 0), 
-                    linear-gradient(#ddd 100px, transparent 0);
-            background-position: 50% 30px ,50% 60px , 50%  90px;
-            transform: rotateY(0deg );
-            transform-origin: left center;
-          animation: paging 1s linear infinite;
-        }
-
-
-        @keyframes paging {
-          to {
-            transform: rotateY( -180deg );
-          }
-        }
-`,
-  },
-  {
-    id: "pencilWrt",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-  height: 200px;
-  width: 200px;
-  border-bottom: 3px solid #ff3d00;
-  box-sizing: border-box;
-  animation: drawLine 4s linear infinite;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  left: calc(100% + 14px);
-  bottom: -6px;
-  width: 16px;
-  height: 100px;
-  border-radius: 20px 20px 50px 50px;
-  background-repeat: no-repeat;
-  background-image: linear-gradient(#ff3d00 6px, transparent 0),
-    linear-gradient(45deg, rgba(0, 0, 0, 0.02) 49%, white 51%),
-    linear-gradient(315deg, rgba(0, 0, 0, 0.02) 49%, white 51%),
-    linear-gradient( to bottom, #ffffff 10%, #ff3d00 10%, #ff3d00 90%, #ffffff 90% );
-  background-size: 3px 3px, 8px 8px, 8px 8px, 16px 88px;
-  background-position: center bottom, left 88px, right 88px, left top;
-  transform: rotate(25deg);
-  animation: pencilRot 4s linear infinite;
-}
-
-@keyframes drawLine {
-  0%, 100% { width: 0px }
-  45%, 55% { width: 200px }
-}
-
-@keyframes pencilRot {
-  0%, 45% {
-    bottom: -6px;
-    left: calc(100% + 14px);
-    transform: rotate(25deg);
-  }
-  55%,
-  100% {
-    bottom: -12px;
-    left: calc(100% + 16px);
-    transform: rotate(220deg);
-  }
-}
-`,
-  },
-  
-  
-  {
-    id: "gHomeChrgLdingFlash",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 148px;
-  height: 148px;
-  border-radius: 50%;
-  margin: -64px auto 0;
-  background-color: #ccc;
-  background-image: radial-gradient(#fff 4px, #0000  0),
-                    radial-gradient(#fff 4px, #0000  0),
-                    radial-gradient(#fff 4px, #0000  0),
-                    radial-gradient(#fff 4px, #0000  0);
-  background-position: 24px center, 8px center, -8px center, -24px center;
-  position: relative;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) inset;
-  animation: flash 1s linear infinite;
-}
-.loader::before , .loader::after {
-  content: '';
-  position: absolute;
-  border: 1px solid #ccc;
-  border-top-color:#0000;
-  left: 50%;
-  top: 100%;
-  transform: translateX(-50%);
-  width: 16px;
-  height: 18px;
-  background: #fff;
-}
-
-.loader::before {
-  width: 0px;
-  height: 64px;
-  transform: translate(-50% , 18px);
-}
-
-@keyframes flash {
- 0%{
-      background-image:
-        radial-gradient(#DDD 4px, #0000  0),
-        radial-gradient(#DDD 4px, #0000  0),
-        radial-gradient(#DDD 4px, #0000  0),
-        radial-gradient(#DDD 4px, #0000  0);
-  }
- 25%{
-      background-image:
-      radial-gradient(#DDD 4px, #0000  0),
-      radial-gradient(#DDD 4px, #0000  0),
-      radial-gradient(#DDD 4px, #0000  0),
-      radial-gradient(#fff 4px, #0000  0);
-  }
- 50%{
-      background-image:
-      radial-gradient(#DDD 4px, #0000  0),
-      radial-gradient(#DDD 4px, #0000  0),
-      radial-gradient(#fff 4px, #0000  0),
-      radial-gradient(#fff 4px, #0000  0);
-  }
- 75%{
-      background-image:
-        radial-gradient(#DDD 4px, #0000  0),
-        radial-gradient(#fff 4px, #0000  0),
-        radial-gradient(#fff 4px, #0000  0),
-        radial-gradient(#fff 4px, #0000  0);
-  }
- 100%{
-      background-image:
-        radial-gradient(#fff 4px, #0000  0),
-        radial-gradient(#fff 4px, #0000  0),
-        radial-gradient(#fff 4px, #0000  0),
-        radial-gradient(#fff 4px, #0000  0);
-  }
-  `,
-  },
-  
-  {
-    id: "phoneChrgingLda",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-  width: 92px;
-  height: 180px;
-  border-radius: 8px;
-  transform: translateY(-30px);
-  background-color: #000;
-  background-image:
-    radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),
-    linear-gradient(#111, #111);
-    background-repeat: no-repeat;
-    background-size: 10px 10px , 84px 162px;
-    background-position: center 2px, 4px 8px;
-  animation: lightUp 6s linear infinite alternate;
-}
-.loader:before {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 190px;
-  transform: translateX(-50%);
-  width: 32px;
-  height: 75px;
-  background-image:
-  linear-gradient(#fff, #fff),
-  linear-gradient(#bbb, #bbb),
-  linear-gradient(#fff, #fff);
-  background-repeat: no-repeat;
-  background-position: center 4px , center top, center 5px;
-  background-size: 11px 11px , 7px 4px ,  2px 100%;
-  animation: plugin 6s linear infinite alternate;
-}
-
-.loader:after {
-  content: '';
-  width: 30px;
-  height: 60px;
-  background-image:
-  linear-gradient(#888, #888),
-  linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.1) 100%),
-  linear-gradient(#15ff00, #15ff00),
-  linear-gradient(#888, #888);
-  background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;
-  background-position: center 0 , center 6px , center bottom , center 4px;
-  background-repeat: no-repeat;
-  top: 50%;
-  left: 50%;
-  position: absolute;
-  transform: translate(-50% , -50%);
-  animation: charging 6s linear infinite alternate;
-}
-
-@keyframes charging {
-   0%  , 25%{
-      opacity: 0;
-      background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;
-    }
-   26% ,  75%{
-      opacity: 1;
-      background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;
-    }
-   50% , 100%{
-      opacity: 1;
-      background-size: 12px 4px, 30px 52px , 30px 56px , 30px 56px
-   }
-}
-
-@keyframes lightUp {
-  0%  , 25%{
-    background-image:
-      radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),
-      linear-gradient(#111, #111);
-  }
-  26% , 100%{
-    background-image:
-      radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),
-      linear-gradient(#DDD, #DDD);
-  }
-}
-
-
-@keyframes plugin {
-  0% , 25% {
-    top: 190px;
-    background-position: center 4px , center top, center 5px;
-  }
-  26%  , 100% {
-    background-position: center 0 , center top, center 5px;
-    top: 180px;
-  }
-}
-  `,
-  },
-  {
-    id: "phoneplzSldingswp",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 112px;
-  height: 218px;
-  border-radius: 8px;
-  background: #fff;
-  background-image:
-  linear-gradient(#c70000 30px, transparent 0),
-  linear-gradient(#e4c200 30px, transparent 0),
-  linear-gradient(#00a136 30px, transparent 0),
-  linear-gradient(#0026ff 30px, transparent 0),
-  linear-gradient(#7e0069 30px, transparent 0);
-  background-repeat: no-repeat;
-  background-position: 5px 5px, 5px 40px, 5px 75px, 5px 110px , 5px 145px;
-  background-size: 90px 30px;
-  border: 6px solid #222;
-  border-width: 18px 6px 20px;
-  box-sizing: border-box;
-  position: relative;
-  animation: clpszp 4s linear infinite;
-}
-.loader:before{
-  content: '';
-  position: absolute;
-  left: -6px;
-  top: -18px;
-  width: 112px;
-  height: 218px;
-  border-radius: 8px;
-  background: linear-gradient(80deg, rgba(0,0,0,0.05) 45%,rgba(0,0,0,0) 46%);
-}
-.loader:after{
-  content: '';
-  position: absolute;
-  box-sizing: border-box;
-  left: 60px;
-  top: 8px;
-  width: 24px;
-  height: 24px;
-  z-index: 2;
-  backdrop-filter: blur(5px);
-  border-radius: 50%;
-  background: rgba(0,0,0,0.12);
-  border: 2px solid rgba(255,255,255,0.2);
-  animation: thumbMove 4s linear infinite ;
-}
-
-@keyframes thumbMove {
-  0% {
-    left: 60px;
-    top: 8px;
-  }
-  10% {
-    left: 20px;
-    top: 8px;
-  }
-  20% {
-    left: 10px;
-    top: 40px;
-  }
-  30% {
-    left: 50px;
-    top: 40px;
-  }
-  40% {
-    left: 50px;
-    top: 80px;
-  }
-  50% {
-    left: 20px;
-    top: 80px;
-  }
-  60% {
-    left: 10px;
-    top: 110px;
-  }
-  70% {
-    left: 60px;
-    top: 110px;
-  }
-  80% {
-    left: 75px;
-    top: 135px;
-  }
-  90% {
-    left: 45px;
-    top: 155px;
-  }
-  100% {
-    left: 25px;
-    top: 8px;
-  }
-
-}
-
-@keyframes clpszp {
-  0% {
-    background-position: 5px 5px, 5px 40px, 5px 75px, 5px 110px , 5px 145px;
-  }
-  20% {
-    background-position: -100px 5px, 5px 40px, 5px 75px, 5px 110px , 5px 145px;
-  }
-  40% {
-    background-position: -100px 5px, 100px 40px, 5px 75px, 5px 110px , 5px 145px;
-  }
-  60% {
-    background-position: -100px 5px, 100px 40px, -100px 75px, 5px 110px , 5px 145px;
-  }
-  80% {
-    background-position: -100px 5px, 100px 40px, -100px 75px, 100px 110px , 5px 145px;
-  }
-  100% {
-    background-position: -100px 5px, 100px 40px, -100px 75px, 100px 110px , -100px 145px;
-  }
-}
-      `,
-  },
-  {
-    id: "envMsLd",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-  border-style: solid;
-  box-sizing: border-box;
-  border-width: 40px 60px 30px 60px;
-  border-color: #3760C9 #96DDFC #96DDFC #36BBF7;
-  animation: envFloating 1s ease-in infinite alternate;
-}
-
-.loader:after{
-  content:"";
-  position: absolute;
-  right: 62px;
-  top: -40px;
-  height: 70px;
-  width: 50px;
-  background-image:
-            linear-gradient(#fff 45px, transparent 0),
-            linear-gradient(#fff 45px, transparent 0),
-            linear-gradient(#fff 45px, transparent 0);
-  background-repeat: no-repeat;
-  background-size: 30px 4px;
-  background-position: 0px 11px , 8px 35px, 0px 60px;
-  animation: envDropping 0.75s linear infinite;
-}
-
-@keyframes envFloating {
-  0% { transform: translate(-2px, -5px)}
-  100% { transform: translate(0, 5px)}
-}
-
-@keyframes envDropping {
-  0% {background-position: 100px 11px , 115px 35px, 105px 60px; opacity: 1;}
-  50% {background-position: 0px 11px , 20px 35px, 5px 60px; }
-  60% {background-position: -30px 11px , 0px 35px, -10px 60px; }
-  75%, 100% {background-position: -30px 11px , -30px 35px, -30px 60px; opacity: 0;}
-}
-      `,
-  },
-
-  {
-    id: "pprDltFlp",
-    html: `<span class="loader">Deleting</span>`,
-    content: 'Deleting',
-    css: `.loader {
-  position: relative;
-  background: #ff3d00;
-  width: 80px;
-  height: 30px;
-  line-height: 18px;
-  text-align: center;
-  color: #931010;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  font-size: 14px;
-  box-sizing: border-box;
-  border: 5px groove #de3500;
-  border-radius: 0 0 4px 4px;
-  box-shadow: 0 5px 7px #0002;
-}
-.loader:before {
-  content: "";
-  width: 70px;
-  height: 80px;
-  background: #fff;
-  box-shadow: 0 0 10px #0003;
-  position: absolute;
-  left: 50%;
-  transform: translatex(-50%);
-  bottom: calc(100% + 6px);
-  animation: loadPaper 4s ease-in infinite;
-}
-.loader:after {
-  content: "";
-  width: 70px;
-  height: 80px;
-  background: linear-gradient(to right, #fff 50%, #0000 51%);
-  background-size: 9px 80px;
-  position: absolute;
-  left: 50%;
-  transform: translatex(-50%);
-  top: calc(100% + 6px);
-  animation: disposePaper 4s ease-in infinite;
-}
-
-@keyframes loadPaper {
-  0%,
-  10% {
-    height: 80px;
-    bottom: calc(100% + 40px);
-  }
-  50% {
-    height: 80px;
-    bottom: calc(100% + 6px);
-  }
-  75%,
-  100% {
-    height: 0px;
-    bottom: calc(100% + 6px);
-  }
-}
-
-@keyframes disposePaper {
-  0%,
-  50% {
-    height: 0px;
-    top: calc(100% + 6px);
-  }
-  75% {
-    height: 80px;
-    top: calc(100% + 6px);
-    opacity: 1;
-  }
-  100% {
-    height: 80px;
-    top: calc(100% + 40px);
-    opacity: 0;
-  }
-}
-      `,
-  },
-
-  {
-    id: "pprDltmch",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-  width: 120px;
-  height: 55px;
-  background-repeat: no-repeat;
-  background-image:
-  radial-gradient(circle 2.5px , #ff3d00 100%, transparent 0),
-  radial-gradient(circle 2.5px , #ff3d00 100%, transparent 0),
-  linear-gradient(#f0fda3 20px, transparent 0),
-  linear-gradient(#333 90px, transparent 0),
-  linear-gradient(#049b87 120px, transparent 0),
-  linear-gradient(to right, #017a6a 10%,#333 10%,#333 90%,#017a6a 90%)
-  ;
-
-  background-size: 5px 5px, 5px 5px, 30px 5px, 90px 10px, 120px 45px , 100px 15px;
-  background-position: 48px 20px , 60px 20px,  10px 20px, center bottom , center bottom , center 0 ;
-
-}
-.loader:before {
-  content: "";
-  width: 70px;
-  height: 80px;
-  background-color: #fff;
-  background-image:   linear-gradient(to bottom, #FFF 50%, #f86133 51%),
-                      linear-gradient(to bottom, #bbb 50%, #0000 51%);
-  background-size: 60px 20px,  60px 10px;
-  background-repeat: no-repeat, repeat-y;
-  background-position: center -5px , center 0;
-  box-shadow: 0 0 10px #0003;
-  position: absolute;
-  left: 50%;
-  transform: translatex(-50%);
-  bottom: calc(100% + 30px);
-  animation: loadPaper 2s ease-in infinite;
-}
-.loader:after {
-  content: "";
-  width: 70px;
-  height: 90px;
-  background-image:
-      linear-gradient(to right, #fff 50%, #0000 51%),
-      linear-gradient(to right, #fff 50%, #0000 51%),
-      linear-gradient(to right, #fff 50%, #0000 51%),
-      linear-gradient(to right, #fff 50%, #0000 51%),
-      linear-gradient(to right, #fff 50%, #0000 51%),
-      linear-gradient(to right, #fff 50%, #0000 51%),
-      linear-gradient(to right, #fff 50%, #0000 51%),
-      linear-gradient(to right, #fff 50%, #0000 51%);
-  background-size: 10px 80px;
-  background-position: 0 0px , 9px 5px, 18px 0px, 27px 7px,
-                      36px 10px, 45px 5px, 55px 0px, 64px 8px;
-  background-repeat: no-repeat;
-  position: absolute;
-  left: 50%;
-  transform: translatex(-50%);
-  top: calc(100% + 6px);
-  animation: disposePaper 2s ease-in infinite;
-}
-
-@keyframes loadPaper {
-  0% {
-    opacity: 0;
-    height: 80px;
-    bottom: calc(100% + 30px);
-  }
-  2% {
-    opacity: 0;
-    height: 80px;
-    bottom: calc(100% + 15px);
-  }
-  50% {
-    height: 80px;
-    bottom: calc(100% - 10px);
-  }
-  75%,
-  100% {
-    height: 0px;
-    bottom: calc(100% - 10px);
-  }
-}
-
-@keyframes disposePaper {
-  0%,
-  60% {
-    height: 0px;
-    top: calc(100% - 9px);
-    background-position: 0 0px , 9px 0, 18px 0, 27px 0,
-                      36px 0, 45px 0, 55px 0, 64px 0;
-  }
-  80% {
-    height: 90px;
-    top: calc(100% - 9px);
-    opacity: 1;
-  }
-  100% {
-    height: 90px;
-    top: calc(100% + 25px);
-    background-position: 0 0px , 9px 5px, 18px 0px, 27px 7px,
-                      36px 10px, 45px 5px, 55px 0px, 64px 8px;
-    opacity: 0;
-  }
-}
-      `,
-  },
-  {
-    id: "audCst",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  margin: auto;
-  width: 100px;
-  height: 30px;
-  overflow: hidden;
-  position: relative;
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
-  box-shadow: 0px 35px 0 -5px #aaa, 0 -5px 0 0px #ddd, 0 -25px 0 -5px #fff,
-    -25px -30px 0 0px #ddd, -25px 30px 0 0px #ddd, 25px -30px 0 0px #ddd,
-    25px 30px 0 0px #ddd, 20px 10px 0 5px #ddd, 20px -10px 0 5px #ddd,
-    -20px -10px 0 5px #ddd, -20px 10px 0 5px #ddd;
-}
-.loader:after,
-.loader:before {
-  content: "";
-  border-radius: 100%;
-  width: 35px;
-  height: 35px;
-  display: block;
-  position: absolute;
-  border: 4px dashed #fff;
-  bottom: -4px;
-  transform: rotate(0deg);
-  box-sizing: border-box;
-  animation: tape 4s linear infinite;
-}
-.loader:before {
-  right: 0;
-  box-shadow: 0 0 0 4px #fff, 0 0 0 34px #000;
-}
-.loader:after {
-  left: 0;
-  box-shadow: 0 0 0 4px #fff, 0 0 0 65px #000;
-}
-
-@keyframes tape {
-  0% {
-    transform: rotate(0deg) scale(0.4);
-  }
-  100% {
-    transform: rotate(-360deg) scale(0.4);
-  }
-}
-      `,
-  },
-  {
-    id: "audRolSp",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 120px;
-  height: 80px;
-  position: relative;
-  transform: rotate(-90deg);
-  background: linear-gradient(174deg, #0000 49%,#000 50%, #0000 51%);
-}
-.loader:after,
-.loader:before {
-  content: "";
-  border-radius: 100%;
-  width: 35px;
-  height: 35px;
-  display: block;
-  position: absolute;
-  border: 4px dashed #fff;
-  bottom: 49px;
-  transform: rotate(0deg);
-  box-sizing: border-box;
-  animation: tape 4s linear infinite;
-
-}
-.loader:before {
-  right: -14px;
-  box-shadow: 0 0 0 4px #fff, 0 0 0 34px #000 , 0 0 5px 34px #0005;
-}
-.loader:after {
-  left: -13px;
-  box-shadow: 0 0 0 4px #fff, 0 0 0 65px #000, 0 0 5px 65px #0005;
-}
-
-@keyframes tape {
-  0% { transform: rotate(0deg) scale(0.4) }
-  100% { transform: rotate(-360deg) scale(0.4) }
-}
-      `,
-  },
-  {
-    id: "printerLd",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 120px;
-    height: 55px;
-    background-repeat: no-repeat;
-    background-image:
-    radial-gradient(circle 2.5px , #ff3d00  100%, transparent 0),
-    linear-gradient(#525252 90px, transparent 0),
-    linear-gradient(#ececec 120px, transparent 0),
-    linear-gradient(to right, #eee 10%,#333 10%,#333 90%,#eee 90%)
-    ;
-
-    background-size: 5px 5px, 90px 10px, 120px 45px , 100px 15px;
-    background-position: 110px 15px,center bottom , center bottom , center 0 ;
-
-  }
-  .loader:before {
-    content: "";
-    width: 70px;
-    background-color: #fff;
-    box-shadow: 0 0 10px #0003;
-    position: absolute;
-    left: 50%;
-    transform: translatex(-50%);
-    bottom: calc(100% - 10px);
-    animation: printerPaper 4s ease-in infinite;
-  }
-  .loader:after {
-    content: "";
-    width: 70px;
-    height: 80px;
-    background-color: #fff;
-    background-image:   linear-gradient(to bottom, #FFF 50%, #ff3d00  51%),
-                        linear-gradient(to bottom, #bbb 50%, #0000 51%);
-    background-size: 60px 20px,  60px 10px;
-    background-repeat: no-repeat, repeat-y;
-    background-position: center 55px , center 0;
-    position: absolute;
-    left: 50%;
-    transform: translatex(-50%) rotate(180deg);
-    box-shadow: 0 10px #fff inset;
-    top: calc(100% - 8px);
-    animation: PrintedPaper 4s ease-in infinite;
-  }
-
-  @keyframes printerPaper {
-    0% , 25% { height: 50px}
-    75%, 100% { height: 0}
-  }
-
-  @keyframes PrintedPaper {
-    0%, 30% {
-      height: 0px;
-      top: calc(100% - 8px);
-    }
-
-    80% {
-      height: 80px;
-      top: calc(100% - 8px);
-      opacity: 1;
-    }
-    100% {
-      height: 80px;
-      top: calc(100% + 10px);
-      opacity: 0;
-    }
-  }
-      `,
-  },
-  {
-    id: "washingMachine",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 120px;
-  height: 150px;
-  background-color: #fff;
-  background-repeat: no-repeat;
-  background-image: linear-gradient(#ddd 50%, #bbb 51%),
-    linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd),
-    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
-    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
-    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%);
-  background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px;
-  background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px;
-  position: relative;
-  border-radius: 6%;
-  animation: shake 3s ease-in-out infinite;
-  transform-origin: 60px 180px;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  left: 5px;
-  top: 100%;
-  width: 7px;
-  height: 5px;
-  background: #aaa;
-  border-radius: 0 0 4px 4px;
-  box-shadow: 102px 0 #aaa;
-}
-
-.loader:after {
-  content: "";
-  position: absolute;
-  width: 95px;
-  height: 95px;
-  left: 0;
-  right: 0;
-  margin: auto;
-  bottom: 20px;
-  background-color: #bbdefb;
-  background-image: 
-    linear-gradient( to right, #0004 0%, #0004 49%, #0000 50%, #0000 100% ),
-    linear-gradient(135deg, #64b5f6 50%, #607d8b 51%);
-  background-size: 30px 100%, 90px 80px;
-  border-radius: 50%;
-  background-repeat: repeat, no-repeat;
-  background-position: 0 0;
-  box-sizing: border-box;
-  border: 10px solid #DDD;
-  box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset;
-  animation: spin 3s ease-in-out infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg) }
-  50% { transform: rotate(360deg) }
-  75% { transform: rotate(750deg) }
-  100% { transform: rotate(1800deg) }
-}
-@keyframes shake {
-  65%, 80%, 88%, 96% { transform: rotate(0.5deg) }
-  50%, 75%, 84%, 92% { transform: rotate(-0.5deg) }
-  0%, 50%, 100%  { transform: rotate(0) }
-}`,
-  },
-
-  {
-    id: "kolIcereamClrShift",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-      	height: 150px;
-	width: 100px;
-	border-radius: 55px 55px 10px 10px;
-	position: relative;
-  background: #FF3D00;
-
-background-image: linear-gradient(0deg,
-    #f63a99 25%,
-    #30dcf6 25%,
-    #30dcf6 25%,
-    #30dcf6 50%,
-    #f2d200 50%,
-    #f2d200 50%,
-    #f2d200 75%,
-    #70ca5c 75%);
-	background-position: 0px 0px;
-  background-size: auto 175px;
-	background-repeat: repeat-y;
-  animation: colorShift 6s linear infinite;
-
-}
-.loader:before {
-    content: '';
-    position: absolute;
-    left: 10px;
-    bottom: 15px;
-    width: 15px;
-    height: 100px;
-    border-radius: 50px;
-    background: rgba(255, 255, 255, 0.5);
-
-  }
-
-.loader:after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 100%;
-  transform: translate(-50% , 0);
-  box-shadow: 0 15px 2px rgba(0, 0, 0, 0.25) inset;
-	width: 32px;
-  height: 45px;
-  background: #E09C5F;
-  border-radius: 0 0 12px 12px;
-}
-
-@keyframes colorShift {
-  to {    background-position: 0 175px}
-}
-
-  `,
-  },
-  {
-    id: "bearWatch",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 160px;
-  height: 185px;
-  position: relative;
-  background: #fff;
-  border-radius: 100px 100px 0 0;
-}
-.loader:after {
-  content: "";
-  position: absolute;
-  width: 100px;
-  height: 125px;
-  left: 50%;
-  top: 25px;
-  transform: translateX(-50%);
-  background-image: radial-gradient(circle, #000 48%, transparent 55%),
-    radial-gradient(circle, #000 48%, transparent 55%),
-    radial-gradient(circle, #fff 30%, transparent 45%),
-    radial-gradient(circle, #000 48%, transparent 51%),
-    linear-gradient(#000 20px, transparent 0),
-    linear-gradient(#cfecf9 60px, transparent 0),
-    radial-gradient(circle, #cfecf9 50%, transparent 51%),
-    radial-gradient(circle, #cfecf9 50%, transparent 51%);
-  background-repeat: no-repeat;
-  background-size: 16px 16px, 16px 16px, 10px 10px, 42px 42px, 12px 3px,
-    50px 25px, 70px 70px, 70px 70px;
-  background-position: 25px 10px, 55px 10px, 36px 44px, 50% 30px, 50% 85px,
-    50% 50px, 50% 22px, 50% 45px;
-  animation: faceLift 3s linear infinite alternate;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  width: 140%;
-  height: 125px;
-  left: -20%;
-  top: 0;
-  background-image: radial-gradient(circle, #fff 48%, transparent 50%),
-    radial-gradient(circle, #fff 48%, transparent 50%);
-  background-repeat: no-repeat;
-  background-size: 65px 65px;
-  background-position: 0px 12px, 145px 12px;
-  animation: earLift 3s linear infinite alternate;
-}
-
-@keyframes faceLift {
-  0% {
-    transform: translateX(-60%);
-  }
-  100% {
-    transform: translateX(-30%);
-  }
-}
-@keyframes earLift {
-  0% {
-    transform: translateX(10px);
-  }
-  100% {
-    transform: translateX(0px);
-  }
-}
-  `,
-  },
-
-
-
-
-  {
-    id: "dnsEgg",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  display: block;
-  position: relative;
-  width: 118px;
-  height: 160px;
-  background-color: #FFF;
-  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-  transform-origin: 50% 100%;
-  animation: 2s eggRot linear infinite alternate;
-}
-.loader:after{
-  content:"";
-  position: absolute;
-  left: 50%;
-  bottom: 15%;
-  width: 80px;
-  height: 86px;
-  transform: translateX(-50%);
-  background-color: #ffd900;
-  border-radius: 50% ;
-}
-
-@keyframes eggRot {
-  0%{    transform: rotate(-25deg)}
-  100%{    transform: rotate(25deg)}
-}
-      `,
-  },
-
-
-
-
-  {
-    id: "grpCookPanEgg",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 100px;
-  height: 100px;
-  display: block;
-  margin: auto;
-  position: relative;
-  background: #222;
-  border-radius: 50%;
-  box-sizing: border-box;
-  transform-origin: 170px 50px;
-  border: 4px solid #333;
-  box-shadow: 3px 4px #0003 inset, 0 0 6px #0002 inset;
-  animation: panmov 0.4s ease-in-out infinite alternate;
-}
-.loader::before {
-  content: '';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%) skew(-15deg, 15deg) rotate(-15deg);
-    width: 55px;
-    height: 53px;
-    background: #fff;
-    background-image: 
-    radial-gradient(circle 3px , #fff6 90%, transparent 10%),
-    radial-gradient(circle 12px , #ffc400 90%, transparent 10%),
-    radial-gradient(circle 12px , #ffae00 100%, transparent 0);
-    background-repeat: no-repeat;
-    background-position: -4px -6px , -2px -2px , -1px -1px;
-    box-shadow: -2px -3px #0002 inset, 0 0 4px #0003 inset;
-    border-radius: 47% 36% 50% 50% / 49% 45% 42% 44%;
-    animation: ylmov 0.6s ease-in-out infinite alternate;
-}
-.loader::after {
-  content: '';
-  position: absolute;
-  left: 100%;
-  top: 48px;
-  height: 15px;
-  width: 70px;
-  background: #222222;
-  border-radius: 0 8px 8px 0;
-  box-shadow: 3px 0 3px #eee2 inset;
-  transform: rotate(5deg) translateX(3px);
-}
-
-@keyframes panmov {
-  0% , 10% { transform: rotate(5deg) }
-  90% , 100% { transform: rotate(-5deg) }
-}
-@keyframes ylmov {
-  to { 
-      border-radius: 50% 36% 50% 50% / 49% 50% 45% 45%;
-      background-position: -2px -4px , 2px 2px , 1px 1px;
-   }
-}
-  `,
-  },
-
-  {
-    id: "grpPanFlyEgg",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 120px;
-    height: 14px;
-    border-radius: 0 0 15px 15px;
-    background-color: #3e494d;
-    box-shadow: 0 -1px 4px #5d6063 inset;
-    animation: panex 0.5s linear alternate infinite;
-    transform-origin: 170px 0;
-    z-index: 10;
-    perspective: 300px;
-
-}
-.loader::before {
-  content: '';
-  position: absolute;
-  left: calc( 100% - 2px);
-  top: 0;
-  z-index: -2;
-  height: 10px;
-  width: 70px;
-  border-radius: 0 4px 4px 0;
-  background-repeat: no-repeat;
-  background-image: linear-gradient(#6c4924, #4b2d21), linear-gradient(#4d5457 24px, transparent 0), linear-gradient(#9f9e9e 24px, transparent 0);
-  background-size: 50px 10px , 4px 8px , 24px 4px;
-  background-position: right center , 17px center , 0px center;
-}
-  .loader::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 0;
-    z-index: -2;
-    transform: translate(-50% , -20px) rotate3d(75, -2, 3, 78deg);
-    width: 55px;
-    height: 53px;
-    background: #fff;
-    background-image:
-    radial-gradient(circle 3px , #fff6 90%, transparent 10%),
-    radial-gradient(circle 12px , #ffc400 90%, transparent 10%),
-    radial-gradient(circle 12px , #ffae00 100%, transparent 0);
-    background-repeat: no-repeat;
-    background-position: -4px -6px , -2px -2px , -1px -1px;
-    box-shadow: -2px -3px #0002 inset, 0 0 4px #0003 inset;
-    border-radius: 47% 36% 50% 50% / 49% 45% 42% 44%;
-    animation: eggRst 1s ease-out infinite;
-  }
-
-@keyframes eggRst {
-  0% ,  100%{  transform: translate(-50%, -20px) rotate3d(90, 0, 0, 90deg); opacity: 0; }
-  10% , 90% {  transform: translate(-50%, -30px) rotate3d(90, 0, 0, 90deg); opacity: 1; }
-  25%  {transform:  translate(-50% , -40px) rotate3d(85, 17, 2, 70deg) }
-  75% {transform:  translate(-50% , -40px) rotate3d(75, -3, 2, 70deg) }
-  50% {transform:  translate(-55% , -50px) rotate3d(75, -8, 3, 50deg) }
-}
-@keyframes panex {
-  0%{  transform: rotate(-5deg)  }
-  100%{  transform: rotate(10deg)  }
-}
-  `,
-  },
-      
-
-
-
-]
\ No newline at end of file
diff --git a/js/loaders/line.js b/js/loaders/line.js
deleted file mode 100644
index 017981f..0000000
--- a/js/loaders/line.js
+++ /dev/null
@@ -1,543 +0,0 @@
-export const LINE = [
-    {
-        id: "6bnzdi6n4z6",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 8px;
-  height: 40px;
-  border-radius: 4px;
-  display: inline-block;
-  margin-left: 20px;
-  margin-top: 10px;
-  position: relative;
-  background: currentColor;
-  color: #FFF;
-  box-sizing: border-box;
-  animation: animloader 0.3s 0.3s linear infinite alternate;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 8px;
-  height: 40px;
-  border-radius: 4px;
-  background: currentColor;
-  position: absolute;
-  bottom: 0;
-  left: 20px;
-  animation: animloader1 0.3s  0.45s  linear infinite alternate;
-}
-.loader::before {
-  left: -20px;
-  animation-delay: 0s;
-}
-
-@keyframes animloader {
-  0% {
-    height: 40px;
-    transform: translateY(0);
-  }
-  100% {
-    height: 10px;
-    transform: translateY(30px);
-  }
-}
-
-@keyframes animloader1 {
-  0% {
-    height: 48px;
-  }
-  100% {
-    height: 4.8px;
-  }
-}
-    `,
-    }, {
-        id: "3n68si8hgcw",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 8px;
-  height: 40px;
-  border-radius: 4px;
-  display: block;
-  margin: 20px auto;
-  position: relative;
-  background: currentColor;
-  color: #FFF;
-  box-sizing: border-box;
-  animation: animloader 0.3s 0.3s linear infinite alternate;
-}
-
-.loader::after, .loader::before {
-  content: '';
-  width: 8px;
-  height: 40px;
-  border-radius: 4px;
-  background: currentColor;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 20px;
-  box-sizing: border-box;
-  animation: animloader 0.3s  0.45s  linear infinite alternate;
-}
-.loader::before {
-  left: -20px;
-  animation-delay: 0s;
-}
-
-@keyframes animloader {
-  0%   { height: 48px} 
-  100% { height: 4px}
-}
-`,
-    }, {
-        id: "f9tbqzhdk0u",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 8px;
-  height: 48px;
-  display: block;
-  margin: auto;
-  left: -20px;
-  position: relative;
-  border-radius: 4px;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite alternate;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 white, 60px 0 white;
-  }
-  50% {
-    box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0.25), 60px 0 white;
-  }
-  100% {
-    box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0.25);
-  }
-}
-    `,
-    },
-    
-    {
-        id: "dkndou5oj6o",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 8px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-  border-radius: 4px;
-  color: #FFF;
-  box-sizing: border-box;
-  animation: animloader 0.6s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 20px -10px, 40px 10px, 60px 0px;
-  }
-  25% {
-    box-shadow: 20px 0px, 40px  0px, 60px 10px;
-  }
-  50% {
-    box-shadow: 20px 10px, 40px -10px, 60px 0px;
-  }
-  75% {
-    box-shadow: 20px 0px, 40px 0px, 60px -10px;
-  }
-  100% {
-    box-shadow: 20px -10px, 40px 10px, 60px 0px;
-  }
-}
-    `,
-    },
-
-    {
-        id: "nd6o-mtrix",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-          width:45px;
-          height:40px;
-          background:
-            linear-gradient(#0000 calc(1*100%/6),#fff 0 calc(3*100%/6),#0000 0),
-            linear-gradient(#0000 calc(2*100%/6),#fff 0 calc(4*100%/6),#0000 0),
-            linear-gradient(#0000 calc(3*100%/6),#fff 0 calc(5*100%/6),#0000 0);
-          background-size:10px 400%;
-          background-repeat: no-repeat;
-          animation:matrix 1s infinite linear;
-          }
-          @keyframes matrix {
-            0% {background-position: 0% 100%, 50% 100%, 100% 100% }
-            100% {background-position: 0% 0%, 50% 0%, 100% 0% }
-          }
-    `,
-    },
-    
-    
-    {
-        id: "xr1ogquld0d",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 6px;
-  display: block;
-  margin: auto;
-  position: relative;
-  border-radius: 4px;
-  color: #FFF;
-  box-sizing: border-box;
-  animation: animloader 0.6s linear infinite;
-}
-
-@keyframes animloader {
-  0% { box-shadow: -10px 20px, 10px 35px , 0px 50px }
-  25% { box-shadow: 0px 20px ,  0px 35px, 10px 50px }
-  50% { box-shadow: 10px 20px, -10px 35px, 0px 50px }
-  75% { box-shadow: 0px 20px, 0px  35px, -10px 50px }
-  100% { box-shadow: -10px 20px, 10px  35px, 0px 50px}
-}
-`,
-    }, {
-        id: "ll3kbbwjsy",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 4.8px;
-  height: 4.8px;
-  display: inline-block;
-  margin-top: 20px;
-  position: relative;
-  border-radius: 4px;
-  color: #FFF;
-  background: currentColor;
-  box-sizing: border-box;
-  animation: animloader 0.3s 0.3s linear infinite alternate;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 4.8px;
-  height: 4.8px;
-  border-radius: 4px;
-  background: currentColor;
-  position: absolute;
-  left: 0;
-  top: 15px;
-  animation: animloader 0.3s 0.45s linear infinite alternate;
-}
-.loader::after {
-  top: -15px;
-  animation-delay: 0s;
-}
-
-@keyframes animloader {
-  0% {
-    width: 4.8px;
-  }
-  100% {
-    width: 48px;
-  }
-}`,
-    }, {
-        id: "dvitkpqg7fa",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 4.8px;
-  height: 4.8px;
-  display: block;
-  margin: 20px auto;
-  position: relative;
-  border-radius: 4px;
-  color: #FFF;
-  background: currentColor;
-  box-sizing: border-box;
-  animation: animloader 0.3s 0.3s linear infinite alternate;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 4.8px;
-  height: 4.8px;
-  border-radius: 4px;
-  background: currentColor;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 15px;
-  animation: animloader 0.3s 0.45s linear infinite alternate;
-}
-.loader::after {
-    top: -15px;
-    animation-delay: 0s;
-}
-
-@keyframes animloader {
-    0% { width: 4.8px }
-    100% { width: 48px}
-}
-`,
-}, 
-  {
-    id: "linSpiLox",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  color: #FFF;
-  position: relative;
-  font-size: 11px;
-  background: #FFF;
-  animation: escaleY 1s infinite ease-in-out;
-  width: 1em;
-  height: 4em;
-  animation-delay: -0.16s;
-}
-.loader:before,
-.loader:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 2em;
-  background: #FFF;
-  width: 1em;
-  height: 4em;
-  animation: escaleY 1s infinite ease-in-out;
-}
-.loader:before {
-  left: -2em;
-  animation-delay: -0.32s;
-}
-
-@keyframes escaleY {
-  0%, 80%, 100% {
-    box-shadow: 0 0;
-    height: 4em;
-  }
-  40% {
-    box-shadow: 0 -2em;
-    height: 5em;
-  }
-}
-`,
-}, 
-    
-{
-  id: "zdy2kji5lvp",
-  html: `<span class="loader"></span>`,
-  css: `.loader {
-  width: 8px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-  border-radius: 4px;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite alternate;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
-  }
-  20% {
-    box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
-  }
-  40% {
-    box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
-  }
-  60% {
-    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
-  }
-  80% {
-    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 rgba(255, 255, 255, 0);
-  }
-  100% {
-    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 white;
-  }
-}
-    `,
-    },
-  {
-    id: "spnPlixShrk34glsf",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        height: 30px;
-        width: 10px;
-        border-radius: 4px;
-        color: #fff;
-        background: currentColor;
-        position: relative;
-        animation: ht 1s ease-in infinite alternate;
-        box-shadow: 15px 0 0 -1px , -15px 0 0 -1px ,
-                    30px 0 0 -2px , -30px 0 0 -2px,
-                    45px 0 0 -3px , -45px 0 0 -3px;
-      }
-
-      @keyframes ht {
-        100% { height: 0px }
-      }
-    `,
-    },
-    
-  {
-    id: "lnBallStpUp",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 75px;
-    height: 100px;
-    background-repeat: no-repeat;
-    background-image: linear-gradient(#DDD 50px, transparent 0),
-                      linear-gradient(#DDD 50px, transparent 0),
-                      linear-gradient(#DDD 50px, transparent 0),
-                      linear-gradient(#DDD 50px, transparent 0),
-                      linear-gradient(#DDD 50px, transparent 0);
-    background-size: 8px 100%;
-    background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
-    animation: pillerPushUp 4s linear infinite;
-  }
-  .loader:after {
-    content: '';
-    position: absolute;
-    bottom: 10px;
-    left: 0;
-    width: 10px;
-    height: 10px;
-    background: #de3500;
-    border-radius: 50%;
-    animation: ballStepUp 4s linear infinite;
-  }
-
-@keyframes pillerPushUp {
-  0% , 40% , 100%{background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px}
-  50% ,  90% {background-position: 0px 50px, 15px 58px, 30px 66px, 45px 78px, 60px 90px}
-}
-
-@keyframes ballStepUp {
-  0% {transform: translate(0, 0)}
-  5% {transform: translate(8px, -14px)}
-  10% {transform: translate(15px, -10px)}
-  17% {transform: translate(23px, -24px)}
-  20% {transform: translate(30px, -20px)}
-  27% {transform: translate(38px, -34px)}
-  30% {transform: translate(45px, -30px)}
-  37% {transform: translate(53px, -44px)}
-  40% {transform: translate(60px, -40px)}
-  50% {transform: translate(60px, 0)}
-  57% {transform: translate(53px, -14px)}
-  60% {transform: translate(45px, -10px)}
-  67% {transform: translate(37px, -24px)}
-  70% {transform: translate(30px, -20px)}
-  77% {transform: translate(22px, -34px)}
-  80% {transform: translate(15px, -30px)}
-  87% {transform: translate(7px, -44px)}
-  90% {transform: translate(0, -40px)}
-  100% {transform: translate(0, 0);}
-}
-    `,
-    },
-  {
-    id: "sndWveBr",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 85px;
-    height: 50px;
-    background-repeat: no-repeat;
-    background-image: linear-gradient(#FFF 50px, transparent 0),
-                      linear-gradient(#FFF 50px, transparent 0),
-                      linear-gradient(#FFF 50px, transparent 0),
-                      linear-gradient(#FFF 50px, transparent 0),
-                      linear-gradient(#FFF 50px, transparent 0),
-                      linear-gradient(#FFF 50px, transparent 0);
-    background-position: 0px center, 15px center, 30px center, 45px center, 60px center, 75px center, 90px center;
-    animation: rikSpikeRoll 0.65s linear infinite alternate;
-  }
-@keyframes rikSpikeRoll {
-  0% { background-size: 10px 3px;}
-  16% { background-size: 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px, 10px 3px}
-  33% { background-size: 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px}
-  50% { background-size: 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px}
-  66% { background-size: 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px}
-  83% { background-size: 10px 3px, 10px 3px,  10px 10px, 10px 30px, 10px 50px, 10px 3px}
-  100% { background-size: 10px 3px, 10px 3px, 10px 3px,  10px 10px, 10px 30px, 10px 50px}
-}
-    `,
-    },
-  {
-    id: "brPpUp",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 55px;
-    height: 55px;
-    background-repeat: no-repeat;
-    background-image: linear-gradient(#FFF 50px, transparent 0),
-                      linear-gradient(#FFF 50px, transparent 0),
-                      linear-gradient(#FFF 50px, transparent 0),
-                      linear-gradient(#FFF 50px, transparent 0),
-                      linear-gradient(#FFF 50px, transparent 0),
-                      linear-gradient(#FFF 50px, transparent 0);
-    background-size: 5px 40px;
-    background-position: 0px center, 10px center, 20px center, 30px center, 40px center, 50px center;
-    animation: spikeUp 1s linear infinite alternate;
-  }
-@keyframes spikeUp {
-  0% { background-size: 5px 40px}
-  16% { background-size: 5px 55px, 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 40px}
-  33% { background-size: 5px 40px, 5px 55px, 5px 40px, 5px 40px, 5px 40px, 5px 40px}
-  50% { background-size: 5px 40px, 5px 40px, 5px 55px, 5px 40px, 5px 40px, 5px 40px}
-  66% { background-size: 5px 40px, 5px 40px, 5px 40px, 5px 55px, 5px 40px, 5px 40px}
-  83% { background-size: 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 55px, 5px 40px}
-  100% { background-size: 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 55px}
-}
-      `,
-    },
-    
-    
-    
-    {
-        id: "ewhrfgl50sf",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 20px;
-  height: 12px;
-  display: block;
-  margin: auto;
-  position: relative;
-  border-radius: 4px;
-  color: #FFF;
-  background: currentColor;
-  box-sizing: border-box;
-  animation: animloader 0.6s 0.3s ease infinite alternate;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 20px;
-  height: 12px;
-  background: currentColor;
-  position: absolute;
-  border-radius: 4px;
-  top: 0;
-  right: 110%;
-  animation: animloader  0.6s ease infinite alternate;
-}
-.loader::after {
-  left: 110%;
-  right: auto;
-  animation-delay: 0.6s;
-}
-
-@keyframes animloader {
-  0% {
-    width: 20px;
-  }
-  100% {
-    width: 48px;
-  }
-}`,
-    },
-]
\ No newline at end of file
diff --git a/js/loaders/objects.js b/js/loaders/objects.js
deleted file mode 100644
index a2a6ebf..0000000
--- a/js/loaders/objects.js
+++ /dev/null
@@ -1,2890 +0,0 @@
-export const OBJECTS = [
-
-  
-  {
-    id: "linQbFll",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-  font-size: 16px;
-  width:  5.5em;
-  height: 5.5em;
-  }
-  .loader:before{
-    content: '';
-    position: absolute;
-    transform: translate(-50%, -50%) rotate(45deg);
-    height: 100%;
-    width: 4px;
-    background: #fff;
-    left: 50%;
-    top: 50%;
-  }
-  .loader:after{
-    content: '';
-    position: absolute;
-    left: 0.2em;
-    bottom: 0.18em;
-    width: 1em;
-    height: 1em;
-    background-color: #de3500;
-    border-radius: 15%;
-    animation: rollingRock 2.5s cubic-bezier(.79, 0, .47, .97) infinite;
-  }
-@keyframes rollingRock {
-  0% {transform: translate(0, -1em) rotate(-45deg)}
-  5% {transform: translate(0, -1em) rotate(-50deg)}
-  20% {transform: translate(1em, -2em) rotate(47deg)}
-  25% {transform: translate(1em, -2em) rotate(45deg)}
-  30% {transform: translate(1em, -2em) rotate(40deg)}
-  45% {transform: translate(2em, -3em) rotate(137deg)}
-  50% {transform: translate(2em, -3em) rotate(135deg)}
-  55% {transform: translate(2em, -3em) rotate(130deg)}
-  70% {transform: translate(3em, -4em) rotate(217deg)}
-  75% {transform: translate(3em, -4em) rotate(220deg)}
-  100% {transform: translate(0, -1em) rotate(-225deg)}
-}
-      `,
-  },
-  {
-    id: "pngPong",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-  height: 40px;
-  width: 6px;
-  color: #FFF;
-  animation: paddles 0.75s ease-out infinite;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  margin: 0 auto;
-  left: 0;
-  right: 0;
-  top: 15px;
-  width: 12px;
-  height: 12px;
-  background-color: #de3500;
-  border-radius: 50%;
-  animation: ballbounce 0.6s ease-out infinite;
-}
-
-@keyframes paddles {
-  0% { box-shadow: -25px -10px, 25px 10px}
-  50% { box-shadow: -25px 8px, 25px -10px }
-  100% { box-shadow: -25px -10px, 25px 10px}
-}
-@keyframes ballbounce {
-  0% { transform: translateX(-20px) scale(1, 1.2) }
-  25% { transform: scale(1.2, 1) }
-  50% { transform: translateX(15px) scale(1, 1.2) }
-  75% { transform: scale(1.2, 1) }
-  100% { transform: translateX(-20px) }
-}
-      `,
-  },
-
-  {
-    id: "brckBblUp",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    color: #fff;
-    font-family: Consolas, Menlo, Monaco, monospace;
-    font-weight: bold;
-    font-size: 78px;
-    opacity: 0.8;
-  }
-  .loader:before {
-    content: "{";
-    display: inline-block;
-    animation: pulse 0.4s alternate infinite ease-in-out;
-  }
-  .loader:after {
-    content: "}";
-    display: inline-block;
-    animation: pulse 0.4s 0.3s alternate infinite ease-in-out;
-  }
-
-  @keyframes pulse {
-    to {
-      transform: scale(0.8);
-      opacity: 0.5;
-    }
-  }
-      `,
-  },
-  {
-    id: "wifiLd",
-    html: `<span class="loader"></span>`,
-    css: `.loader, .loader:before {
-	display: inline-block;
-	border: 20px double transparent;
-	border-top-color: #fff;
-	border-radius: 50%;
-  box-sizing: border-box;
-}
-.loader {
-	padding: 8px;
-  animation: wifiLoading 1s ease-in infinite;
-}
-.loader:before {
-	content: '';
-	width: 0; height: 0;
-}
-@keyframes wifiLoading {
-  0% { border-style: none}
-  100% { border-style: double}
-}
-      `,
-  },
-  {
-    id: "strShw",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-      position: relative;
-      color: #de3500;
-      width: 0;
-      height: 0;
-      border-right: 50px solid transparent;
-      border-bottom: 35px solid #de3500;
-      border-left: 50px solid transparent;
-      animation: 3s starRotate linear infinite;
-    }
-    .loader:before {
-      border-bottom: 40px solid #de3500;
-      border-left: 15px solid transparent;
-      border-right: 15px solid transparent;
-      position: absolute;
-      height: 0;
-      width: 0;
-      top: -22px;
-      left: -31px;
-      display: block;
-      content: '';
-      transform: rotate(-35deg);
-    }
-    .loader:after {
-      content: '';
-      position: absolute;
-      display: block;
-      color: #de3500;
-      top: 1.5px;
-      transform: rotate(-70deg);
-      left: -52px;
-      width: 0px;
-      height: 0px;
-      border-right: 50px solid transparent;
-      border-bottom: 35px solid #de3500;
-      border-left: 50px solid transparent;
-    }
-
-  @keyframes starRotate {
-    0%{    transform: rotate(0deg) scale(0.15)}
-    50%{    transform: rotate(360deg) scale(1)}
-    100%{    transform: rotate(720deg) scale(0.15)}
-  }
-      `,
-  },
-  {
-    id: "glCoinFlip",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  transform: translateZ(1px);
-}
-.loader:after {
-  content: '$';
-  display: inline-block;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  text-align: center;
-  line-height:40px;
-  font-size: 32px;
-  font-weight: bold;
-  background: #FFD700;
-  color: #DAA520;
-  border: 4px double ;
-  box-sizing: border-box;
-  box-shadow:  2px 2px 2px 1px rgba(0, 0, 0, .1);
-  animation: coin-flip 4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-}
-@keyframes coin-flip {
-  0%, 100% {
-    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
-  }
-  0% {
-    transform: rotateY(0deg);
-  }
-  50% {
-    transform: rotateY(1800deg);
-    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
-  }
-  100% {
-    transform: rotateY(3600deg);
-  }
-}
-      `,
-  },
-  {
-    id: "heartBeat",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-  width: 40px;
-  height: 60px;
-  animation: heartBeat 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.loader:before,
-.loader:after {
-  content: "";
-  background: #ff3d00 ;
-  width: 40px;
-  height: 60px;
-  border-radius: 50px 50px 0 0;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  transform: rotate(45deg);
-  transform-origin: 50% 68%;
-  box-shadow: 5px 4px 5px #0004 inset;
-}
-.loader:after {
-  transform: rotate(-45deg);
-}
-@keyframes heartBeat {
-  0% { transform: scale(0.95) }
-  5% { transform: scale(1.1) }
-  39% { transform: scale(0.85) }
-  45% { transform: scale(1) }
-  60% { transform: scale(0.95) }
-  100% { transform: scale(0.9) }
-}
-      `,
-  },
-
-  {
-    id: "colorPalatteSpltex3",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-      width: 32px;
-      height: 84px;
-      border-radius: 0 0 20px 20px;
-      position: relative;
-      background: #FFF radial-gradient(circle 5px at 50% 85%, #FF3D00 100%, transparent 0);
-    }
-    .loader:before , .loader:after {
-      content: "";
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 32px;
-      height: 84px;
-      border-radius: 0 0 20px 20px;
-      background: #FFF;
-      opacity: 0.8;
-      transform: rotate(60deg);
-      transform-origin: 50% 85%;
-      z-index: -2;
-      animation: rotate 1s infinite linear alternate;
-    }
-    .loader:after {
-      animation: rotate2 1s infinite linear alternate;
-      opacity: 0.5;
-    }
-    @keyframes rotate {
-      0% , 20% { transform: rotate(0deg) }
-      80% , 100% { transform: rotate(30deg) }
-    }
-    @keyframes rotate2 {
-      0% , 20% { transform: rotate(0deg) }
-      80% , 100% { transform: rotate(60deg) }
-    }
-  `,
-  },
-
-
-
-
-  {
-    id: "stepLoaderBallStepping",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-          position: relative;
-          width: 120px;
-          height: 90px;
-          margin: 0 auto;
-        }
-        .loader:before {
-          content: "";
-          position: absolute;
-          bottom: 30px;
-          left: 50px;
-          height: 30px;
-          width: 30px;
-          border-radius: 50%;
-          background: #FF3D00;
-          animation: loading-bounce 0.5s ease-in-out infinite alternate;
-        }
-        .loader:after {
-          content: "";
-          position: absolute;
-          right: 0;
-          top: 0;
-          height: 7px;
-          width: 45px;
-          border-radius: 4px;
-          box-shadow: 0 5px 0 #fff, -35px 50px 0 #fff, -70px 95px 0 #fff;
-          animation: loading-step 1s ease-in-out infinite;
-        }
-
-        @keyframes loading-bounce {
-          0% { transform: scale(1, 0.7)}
-          40% { transform: scale(0.8, 1.2)}
-          60% { transform: scale(1, 1)}
-          100% { bottom: 140px }
-        }
-        @keyframes loading-step {
-          0% {
-            box-shadow: 0 10px 0 rgba(0,0,0,0),
-                        0 10px 0 #fff,
-                      -35px 50px 0 #fff,
-                      -70px 90px 0 #fff;
-          }
-          100% {
-            box-shadow: 0 10px 0 #fff,
-                      -35px 50px 0 #fff,
-                      -70px 90px 0 #fff,
-                      -70px 90px 0 rgba(0,0,0,0);
-          }
-        }
-  `,
-  },
-  {
-    id: "spincVsSroadgd4f",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-      width: 86px;
-      height: 50px;
-      border-radius: 50px;
-      background:
-        radial-gradient(farthest-side,#0000 calc(100% - 10px),#FFF calc(100% - 10px) 100%,#0000) left,
-        radial-gradient(farthest-side,#0000 calc(100% - 10px),#FFF calc(100% - 10px) 100%,#0000) right;
-      background-size: calc(50% + 5px) 100%;
-      background-repeat: no-repeat;
-      position: relative;
-      animation: flipX 1s infinite linear;
-    }
-    .loader:before {
-      content: "";
-      position: absolute;
-      inset:0;
-      margin:auto;
-      width:10px;
-      height: 10px;
-      border-radius: 50%;
-      background:#FF3D00;
-      transform-origin: -14px 50%;
-      animation: rotate 0.5s infinite linear;
-    }
-
-    @keyframes flipX {
-        0%,49.99% { transform:scaleX(1)}
-        50%,100% { transform:scaleX(-1)}
-    }
-
-    @keyframes rotate {
-        100% { transform:rotate(360deg)}
-    }
-        `,
-  },
-
-  {
-    id: "pendRoxy-2x",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-  width: 164px;
-  height: 164px;
-  perspective: 300px;
-}
-.loader::before  {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background-image:
-    radial-gradient(circle 15px, #FF3D00 100%, transparent 0),
-    radial-gradient(circle 15px, #FF3D00 100%, transparent 0),
-    linear-gradient(#FF3D00 100px, transparent 0),
-    linear-gradient(#FF3D00 100px, transparent 0);
-  background-repeat: no-repeat;
-  background-size: 30px 30px, 30px 30px, 40% 2px, 40% 2px;
-  background-position: left center, right center, left center, right center;
-  animation: rotateY 1s linear infinite;
-}
-.loader::after  {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background-image:
-    radial-gradient(circle 15px, #fff 100%, transparent 0),
-    radial-gradient(circle 15px, #fff 100%, transparent 0),
-    linear-gradient(#fff 100px, transparent 0),
-    linear-gradient(#fff 100px, transparent 0);
-  background-repeat: no-repeat;
-  background-size: 30px 30px, 30px 30px, 2px 40% , 2px 40%;
-  background-position: top center, bottom center, top center, bottom center;
-  animation: rotateX 1s linear infinite;
-}
-
-@keyframes rotateY {
-  0%{ transform: rotateY(0deg)}
-  100% { transform: rotateY(-180deg)}
-}
-@keyframes rotateX {
-  0%, 25% { transform: rotateX(0deg)}
-  75%,  100% { transform: rotateX(-180deg)}
-}
-  `,
-  },
-   
-  {
-    id: "packManEt2Xb",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        position: relative;
-        border: 24px solid #FFF;
-        border-radius: 50%;
-        box-sizing: border-box;
-        animation: eat 1s linear infinite;
-      }
-      .loader::after , .loader::before {
-        content: '';
-        position: absolute;
-        left: 50px;
-        top: 50%;
-        transform: translateY(-50%);
-        background: #fff;
-        width: 15px;
-        height: 15px;
-        border-radius: 50%;
-        box-sizing: border-box;
-        opacity: 0;
-        animation: move 2s linear infinite;
-      }
-
-      .loader::before {
-        animation-delay: 1s;
-      }
-
-      @keyframes eat {
-        0% , 49% { border-right-color: #FFF }
-        50% , 100% { border-right-color: #0000 }
-      }
-      @keyframes move {
-        0% { left: 75px ; opacity: 1}
-        50% { left: 0px; opacity: 1 }
-        52%, 100% { left: -5px; opacity: 0; }
-      }
-`,
-    },
-
-
-
-
-  {
-    id: "imgSunMuntRase2",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-      width: 64px;
-      height: 64px;
-      position: relative;
-      background: #FFF;
-      border-radius: 4px;
-      overflow: hidden;
-    }
-    .loader:before {
-      content: "";
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 40px;
-      height: 40px;
-      transform: rotate(45deg) translate(30%, 40%);
-      background: #ff9371;
-      box-shadow: 32px -34px 0 5px #ff3d00;
-      animation: slide 2s infinite ease-in-out alternate;
-    }
-    .loader:after {
-      content: "";
-      position: absolute;
-      left: 10px;
-      top: 10px;
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background: #ff3d00;
-      transform: rotate(0deg);
-      transform-origin: 35px 145px;
-      animation: rotate 2s infinite ease-in-out;
-    }
-
-    @keyframes slide {
-      0% , 100%{ bottom: -35px}
-      25% , 75%{ bottom: -2px}
-      20% , 80%{ bottom: 2px}
-    }
-    @keyframes rotate {
-      0% { transform: rotate(-15deg)}
-      25% , 75%{ transform: rotate(0deg)}
-      100% {  transform: rotate(25deg)}
-    }
-  `,
-    },
-
-  {
-    id: "navigator2SpinLding",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-      width: 64px;
-      height: 64px;
-      position: relative;
-      background: #FFF;
-      border-radius: 50%;
-      transform: rotate(45deg);
-      animation: rotate 2s linear infinite;
-    }
-    .loader:before {
-      content: "";
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 15px;
-      height: 30px;
-      background: #FF3D00;
-      transform: skew(5deg , 60deg) translate(-50%, -5%);
-    }
-
-    .loader:after {
-      content: "";
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: #FFF;
-      transform:translate(-50% , -50%);
-    }
-
-    @keyframes rotate {
-      0% { transform: rotate(45deg)}
-      30% , 50% , 70%  { transform: rotate(230deg)}
-      40% , 60% , 80% { transform: rotate(240deg)}
-      100% {  transform: rotate(245deg)}
-   }
-  `,
-    },
-
-  {
-    id: "globArRot",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 120px;
-    height: 140px;
-    background-image: radial-gradient(circle 30px, #fff 100%, transparent 0),
-    radial-gradient(circle 5px, #fff 100%, transparent 0),
-    radial-gradient(circle 5px, #fff 100%, transparent 0),
-    linear-gradient(#FFF 20px, transparent 0);
-    background-position: center 127px , 94px 102px , 16px 18px, center 114px;
-    background-size: 60px 60px, 10px 10px , 10px 10px , 4px 14px;
-    background-repeat: no-repeat;
-    z-index: 10;
-    perspective: 500px;
-  }
-  .loader::before {
-    content: '';
-    position: absolute;
-    width: 100px;
-    height: 100px;
-    border-radius:50%;
-    border: 3px solid #fff;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -55%) rotate(-45deg);
-    border-right-color: transparent;
-    box-sizing: border-box;
-}
-  .loader::after {
-    content: '';
-    position: absolute;
-    height: 80px;
-    width: 80px;
-    transform: translate(-50%, -55%) rotate(-45deg) rotateY(0deg) ;
-    left: 50%;
-    top: 50%;
-    box-sizing: border-box;
-    border: 7px solid #FF3D00;
-    border-radius:50%;
-    animation: rotate 0.5s linear infinite;
-  }
-
-@keyframes rotate {
-  to{transform: translate(-50%, -55%) rotate(-45deg) rotateY(360deg)   }
-}
-    `,
-    },
-
-  {
-    id: "fillSandClock",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  box-sizing: border-box;
-  display: inline-block;
-  width: 50px;
-  height: 80px;
-  border-top: 5px solid #fff;
-  border-bottom: 5px solid #fff;
-  position: relative;
-  background: linear-gradient(#FF3D00 30px, transparent 0) no-repeat;
-  background-size: 2px 40px;
-  background-position: 50% 0px;
-  animation: spinx 5s linear infinite;
-}
-.loader:before, .loader:after {
-  content: "";
-  width: 40px;
-  left: 50%;
-  height: 35px;
-  position: absolute;
-  top: 0;
-  transform: translatex(-50%);
-  background: rgba(255, 255, 255, 0.4);
-  border-radius: 0 0 20px 20px;
-  background-size: 100% auto;
-  background-repeat: no-repeat;
-  background-position: 0 0px;
-  animation: lqt 5s linear infinite;
-}
-.loader:after {
-  top: auto;
-  bottom: 0;
-  border-radius: 20px 20px 0 0;
-  animation: lqb 5s linear infinite;
-}
-@keyframes lqt {
-  0%, 100% {
-    background-image: linear-gradient(#FF3D00 40px, transparent 0);
-    background-position: 0% 0px;
-  }
-  50% {
-    background-image: linear-gradient(#FF3D00 40px, transparent 0);
-    background-position: 0% 40px;
-  }
-  50.1% {
-    background-image: linear-gradient(#FF3D00 40px, transparent 0);
-    background-position: 0% -40px;
-  }
-}
-@keyframes lqb {
-  0% {
-    background-image: linear-gradient(#FF3D00 40px, transparent 0);
-    background-position: 0 40px;
-  }
-  100% {
-    background-image: linear-gradient(#FF3D00 40px, transparent 0);
-    background-position: 0 -40px;
-  }
-}
-@keyframes spinx {
-  0%, 49% {
-    transform: rotate(0deg);
-    background-position: 50% 36px;
-  }
-  51%, 98% {
-    transform: rotate(180deg);
-    background-position: 50% 4px;
-  }
-  100% {
-    transform: rotate(360deg);
-    background-position: 50% 36px;
-  }
-}
-    `,
-  },
-
-    {
-        id: "eyeBallMoveSinleo6e",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-          position: relative;
-          width: 78px;
-          height: 78px;
-          border-radius: 50%;
-          box-sizing: border-box;
-          background: #fff;
-          border: 8px solid #131a1d;
-          overflow: hidden;
-          box-sizing: border-box;
-        }
-        .loader::after {
-          content: '';
-          position: absolute;
-          left: 0;
-          top: -50%;
-          width: 100%;
-          height: 100%;
-          background: #263238 ;
-          z-index: 5;
-          border-bottom: 8px solid #131a1d;
-          box-sizing: border-box;
-          animation: eyeShade 3s infinite;
-        }
-        .loader::before {
-          content: '';
-          position: absolute;
-          left: 20px;
-          bottom: 15px;
-          width: 32px;
-          z-index: 2;
-          height: 32px;
-          background: #111;
-          border-radius: 50%;
-          animation: eyeMove 3s infinite;
-        }
-        @keyframes eyeShade {
-          0%   { transform: translateY(0)}
-          20%   { transform: translateY(5px)}
-          40% , 50%   { transform: translateY(-5px)}
-          60%   { transform: translateY( -8px)}
-          75%   { transform: translateY( 5px)}
-          100%   { transform: translateY(10px)}
-        }
-        @keyframes eyeMove {
-          0%   { transform: translate(0 , 0)}
-          20%   { transform: translate(0px , 5px)}
-          40% , 50%   { transform: translate(0px , -5px)}
-          60%   { transform: translate(-10px , -5px)}
-          75%   { transform: translate(-20px , 5px)}
-          100%   { transform: translate(0 , 10px)}
-        }
-`,
-    },
-    {
-        id: "lookingEyesmove",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-            position: relative;
-            width: 108px;
-            display: flex;
-            justify-content: space-between;
-          }
-          .loader::after , .loader::before  {
-            content: '';
-            display: inline-block;
-            width: 48px;
-            height: 48px;
-            background-color: #FFF;
-            background-image:  radial-gradient(circle 14px, #0d161b 100%, transparent 0);
-            background-repeat: no-repeat;
-            border-radius: 50%;
-            animation: eyeMove 10s infinite , blink 10s infinite;
-          }
-          @keyframes eyeMove {
-            0%  , 10% {     background-position: 0px 0px}
-            13%  , 40% {     background-position: -15px 0px}
-            43%  , 70% {     background-position: 15px 0px}
-            73%  , 90% {     background-position: 0px 15px}
-            93%  , 100% {     background-position: 0px 0px}
-          }
-          @keyframes blink {
-            0%  , 10% , 12% , 20%, 22%, 40%, 42% , 60%, 62%,  70%, 72% , 90%, 92%, 98% , 100%
-            { height: 48px}
-            11% , 21% ,41% , 61% , 71% , 91% , 99%
-            { height: 18px}
-          }
-`,
-    },
- 
-
-    {
-        id: "h7vm0fttsne",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-  background-color: #FFF;
-  background: radial-gradient(ellipse at center, #FF3D00 0%, #FF3D00 14%, #FFF 15%, #FFF 100%);
-  background-size: cover;
-  background-position: center;
-  border-radius: 50%;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  position: absolute;
-  height: 16px;
-  width: 4px;
-  background: #FF3D00;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) rotate(0deg);
-  transform-origin: 25% 0;
-  box-sizing: border-box;
-  animation: rotation 10s linear infinite;
-}
-.loader::before {
-  height: 22px;
-  width: 2px;
-  transform: translateX(-50%) rotate(0deg);
-  animation-duration: 1s;
-} 
-@keyframes rotation {
-  0%    { transform: rotate(0deg)}
-  100%  { transform: rotate(360deg)}
-} 
-`,
-    },
-  
-    {
-        id: "52ma1rva0kd",
-        note: 'Set background',
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 60px;
-  height: 40px;
-  position: relative;
-  display: inline-block;
-  --base-color: #263238; /*use your base color*/
-}
-.loader::before {
-  content: '';  
-  left: 0;
-  top: 0;
-  position: absolute;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: #FFF;
-  background-image: radial-gradient(circle 8px at 18px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0);
-  background-repeat: no-repeat;
-  box-sizing: border-box;
-  animation: rotationBack 3s linear infinite;
-}
-.loader::after {
-  content: '';  
-  left: 35px;
-  top: 15px;
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: #FFF;
-  background-image: radial-gradient(circle 5px at 12px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0);
-  background-repeat: no-repeat;
-  box-sizing: border-box;
-  animation: rotationBack 4s linear infinite reverse;
-}
-@keyframes rotationBack {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(-360deg);
-  }
-}  `,
-    }, {
-        id: "ndepi68izxb",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 15px;
-  height: 20px;
-  margin-left: 15px;
-  background: #FFF;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: bump 0.4s ease-in infinite alternate;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  left: 50%;
-  top: 100%;
-  transform: translate(-50%, 0);
-  position: absolute;
-  border: 15px solid transparent;
-  border-top-color: #FFF;
-}
-
-@keyframes bump {
-  0% {
-    transform: translate(-50%, 5px);
-  }
-  100% {
-    transform: translate(-50%, -5px);
-  }
-}
-    `,
-    }, {
-        id: "d98dr90vrl4",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 15px;
-  height: 20px;
-  background: #FFF;
-  margin-left: 15px;
-  margin-top: 15px;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  animation: bump 0.4s linear infinite alternate;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  left: 50%;
-  bottom: 100%;
-  transform: translate(-50%, 0);
-  position: absolute;
-  border: 15px solid transparent;
-  border-bottom-color: #FFF;
-}
-
-@keyframes bump {
-  0% {
-    transform: translate(-50%, 5px);
-  }
-  100% {
-    transform: translate(-50%, -5px);
-  }
-}
-    `,
-    }, {
-        id: "vzbf4u0evp",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 12px;
-  background: #FFF;
-  margin-top: 40px;
-  display: inline-block;
-  position: relative;
-}
-.loader::after {
-  content: '';  
-  left: 50%;
-  bottom: 0;
-  transform: translate(-50%, 0);
-  position: absolute;
-  border: 15px solid transparent;
-  border-top-color: #FFF;
-  box-sizing: border-box;
-  animation: bump 0.4s ease-in-out infinite alternate;
-}
-.loader::before {
-  content: '';  
-  left: 50%;
-  bottom: 25px;
-  transform: translate(-50%, 0);
-  position: absolute;
-  width: 15px;
-  height: 20px;
-  background: #FFF;
-  box-sizing: border-box;
-  animation: bump 0.4s ease-in-out infinite alternate;
-}
-
-@keyframes bump {
-  0% {
-    transform: translate(-50%, 5px);
-  }
-  100% {
-    transform: translate(-50%, -5px);
-  }
-}
-    `,
-    }, {
-        id: "4vrwgk8hm4e",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 12px;
-  margin-top: 40px;
-  background: #FFF;
-  display: inline-block;
-  position: relative;
-}
-.loader::after {
-  content: '';  
-  left: 50%;
-  top: -47px;
-  transform: translate(-50%, 0);
-  position: absolute;
-  border: 15px solid transparent;
-  border-bottom-color: #FFF;
-  box-sizing: border-box;
-  animation: bump 0.4s ease-in-out infinite alternate;
-}
-.loader::before {
-  content: '';  
-  left: 50%;
-  bottom: 15px;
-  transform: translate(-50%, 0);
-  position: absolute;
-  width: 15px;
-  height: 20px;
-  background: #FFF;
-  box-sizing: border-box;
-  animation: bump 0.4s ease-in-out infinite alternate;
-}
-
-@keyframes bump {
-  0% {
-    transform: translate(-50%, 5px);
-  }
-  100% {
-    transform: translate(-50%, -5px);
-  }
-}
-    `,
-    },
-    
-  {
-    id: "locakHackPrcess",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 64px;
-  height: 44px;
-  position: relative;
-  border: 5px solid #fff;
-  border-radius: 8px;
-}
-.loader::before {
-  content: '';
-  position: absolute;
-  border: 5px solid #fff;
-  width: 32px;
-  height: 28px;
-  border-radius: 50% 50% 0 0;
-  left: 50%;
-  top: 0;
-  transform: translate(-50% , -100%)
-
-}
-.loader::after {
-  content: '';
-  position: absolute;
-  transform: translate(-50% , -50%);
-  left: 50%;
-  top: 50%;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #fff;
-  box-shadow: 16px 0 #fff, -16px 0 #fff;
-  animation: flash 0.5s ease-out infinite alternate;
-}
-
-@keyframes flash {
-  0% {
-    background-color: rgba(255, 255, 255, 0.25);
-    box-shadow: 16px 0 rgba(255, 255, 255, 0.25), -16px 0 rgba(255, 255, 255, 1);
-  }
-  50% {
-    background-color: rgba(255, 255, 255, 1);
-    box-shadow: 16px 0 rgba(255, 255, 255, 0.25), -16px 0 rgba(255, 255, 255, 0.25);
-  }
-  100% {
-    background-color: rgba(255, 255, 255, 0.25);
-    box-shadow: 16px 0 rgba(255, 255, 255, 1), -16px 0 rgba(255, 255, 255, 0.25);
-  }
-}
-    `,
-    },
-    
-    
-    {
-        id: "4z17obmn46s",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 24px;
-  display: inline-block;
-  position: relative;
-  color: #FFF;
-  border: 1px solid;
-  box-sizing: border-box;
-  animation: fillX 2s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  background: #FFF;
-  width: 5px;
-  height: 12px;
-}
-
-@keyframes fillX {
-  0% {
-    box-shadow: 0 0 inset;
-  }
-  100% {
-    box-shadow: 48px 0 inset;
-  }
-}
-    `,
-    },
-    
-    
-    
-    
-    {
-        id: "n4oiol4um1g",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 24px;
-  display: inline-block;
-  position: relative;
-  border: 1px solid #FFF;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  border: 1px solid #FFF;
-  width: 5px;
-  height: 12px;
-}
-.loader::before {
-  content: '';  
-  position: absolute;
-  left: -8px;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 80%;
-  width: 6px;
-  box-sizing: border-box;
-  animation: animloader  2s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 11px 0 rgba(255, 255, 255, 0), 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
-  }
-  25% {
-    box-shadow: 11px 0 white, 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
-  }
-  50% {
-    box-shadow: 11px 0 white, 22px 0 white, 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
-  }
-  75% {
-    box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 rgba(255, 255, 255, 0);
-  }
-  100% {
-    box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 white;
-  }
-}
-    `,
-    },
-  {
-    id: "snapChatLoading",
-    html: `<span class="loader"></span>`,
-    css: `.loader{
-  width: 100px;
-  height: 75px;
-  margin: 0 auto;
-  background: #fff;
-  position: relative;
-  border-radius: 100%;
-}
-.loader:before {
-  content: '';
-  position: absolute;
-  box-sizing: border-box;
-  border: 15px solid transparent;
-  border-top: 25px solid #fff;
-  transform: rotate(45deg);
-  top: 50px;
-  left: -15px;
-}
-
-.loader:after {
-  content: '';
-  width: 12px;
-  height: 12px;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50% , -50%);
-  border-radius: 50%;
-  background-color: #FF3D00;
-  box-shadow: 20px 0 #FF3D00, -20px 0 #FF3D00;
-  animation: flash 0.5s ease-out infinite alternate;
-}
-
-@keyframes flash {
-  0% {
-    background-color: rgba(255, 60, 0, 0.25);
-    box-shadow: 20px 0 rgba(255, 60, 0, 0.25), -20px 0 #FF3D00;
-  }
-  50% {
-    background-color: #FF3D00;
-    box-shadow: 20px 0 rgba(255, 60, 0, 0.25), -20px 0 rgba(255, 60, 0, 0.25);
-  }
-  100% {
-    background-color: rgba(255, 60, 0, 0.25);
-    box-shadow: 20px 0 #FF3D00, -20px 0 rgba(255, 60, 0, 0.25);
-  }
-}
-      `,
-    },
-    
-    {
-      id: "pl-thras-blan",
-      html: `<span class="loader"></span>`,
-      css: `.loader{
-        display: block;
-        position: relative;
-        height: 32px;
-        width: 120px;
-        border-bottom: 5px solid #fff;
-        box-sizing: border-box;
-        animation: balancing 2s linear infinite alternate;
-        transform-origin: 50% 100%;
-      }
-      .loader:before{
-        content: '';
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 26px;
-        height: 26px;
-        border-radius: 50%;
-        background: #FF3D00;
-        animation: ballbns 2s linear infinite alternate;
-      }
-      .loader:after{
-        content: '';
-        position: absolute;
-        left: 50%;
-        bottom: 0;
-        height: 20px;
-        width: 20px;
-        transform: translate(-50%, 100%);
-        border-radius: 50%;
-        border: 6px solid #fff;
-      }
-      @keyframes ballbns {
-        0% {  left: 0; transform: translateX(0%); }
-        100% {  left: 100%; transform: translateX(-100%); }
-      }
-      @keyframes balancing {
-        0% {  transform: rotate(-15deg); }
-        50% {  transform: rotate(0deg); }
-        100% {  transform: rotate(15deg); }
-      }`
-    },
-    
-    {
-        id: "ra8ufhusqs",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-  border: 4px solid #FFF;
-  box-sizing: border-box;
-  animation: fill 2s linear infinite alternate;
-  color: rgba(255, 61, 0, 0.9);
-  border-radius: 0 0 4px 4px;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  border: 4px solid #FFF;
-  width: 20px;
-  height: 25px;
-  border-radius: 0 4px 4px 0;
-}
-
-@keyframes fill {
-  0% {
-    box-shadow: 0 0  inset;
-  }
-  100% {
-    box-shadow: 0 -48px inset;
-  }
-} `,
-    },
-
- {
-        id: "4iqbx9mqg3e",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 32px;
-  height: 72px;
-  display: inline-block;
-  left: 5px;
-  position: relative;
-  border: 2px solid #FFF;
-  box-sizing: border-box;
-  animation: animloader 2s linear infinite alternate;
-  color: #FF3D00;
-  border-radius: 0 0 4px 4px;
-  transform: perspective(140px) rotateX(-45deg);
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 0 0  inset;
-  }
-  100% {
-    box-shadow: 0 -70px inset;
-  }
-}
-`,
-    },
-
- {
-        id: "bottleOfwineFill",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-          width: 40px;
-          height: 98px;
-          display: inline-block;
-          position: relative;
-          border: 2px solid #FFF;
-          box-sizing: border-box;
-          color: rgba(255, 61, 0, 0.9);
-          border-radius: 20px 20px 4px 4px;
-          background: #fff;
-          animation: fill 2s linear infinite alternate;
-        }
-        .loader::after {
-          content: '';
-          box-sizing: border-box;
-          position: absolute;
-          left: 50%;
-          top: 0%;
-          transform: translate(-50% , -95%);
-          border: 2px solid #FFF;
-          border-bottom: none;
-          background: #fff;
-          width: 15px;
-          height: 35px;
-          animation: fillNeck 2s linear infinite alternate;
-        }
-
-        @keyframes fill {
-          0% { box-shadow: 0 0  inset }
-          50% , 100% { box-shadow: 0 -98px inset }
-        }
-
-
-        @keyframes fillNeck {
-          0% , 50%{ box-shadow: 0 0  inset }
-          100% { box-shadow: 0 -20px inset }
-        }
-    `,
-  },
-    
-    
-    
-    
-    {
-        id: "ofqzm8c3y98",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 40px;
-  margin-top: 30px;
-  display: inline-block;
-  position: relative;
-  background: #FFF;
-  border-radius: 15% 15% 35% 35%;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 45px;
-  top: 8px;
-  border: 4px solid #FFF;
-  width: 16px;
-  height: 20px;
-  border-radius: 0 4px 4px 0;
-}
-.loader::before {
-  content: '';  
-  position: absolute;
-  width: 1px;
-  height: 10px;
-  color: #FFF;
-  top: -15px;
-  left: 11px;
-  box-sizing: border-box;
-  animation: animloader 1s ease infinite;
-}
-
-@keyframes animloader {
-    0% {
-  box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
-}
-    50% {
-  box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
-}
-    100% {
-  box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
-}
-  }`,
-    }, {
-        id: "q6a6szttdf",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 96px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-  background: #FFF;
-  border-radius: 48px 48px 0 0;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  width: 24px;
-  height: 12px;
-  border-radius: 24px 24px 0 0;
-  background: #FF3D00;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 0;
-}
-.loader::before {
-  content: '';  
-  position: absolute;
-  width: 4px;
-  height: 32px;
-  left: 0;
-  right: 0;
-  margin: auto;
-  bottom: 0;
-  background: #FF3D00;
-  transform-origin: 50% 100%;
-  box-sizing: border-box;
-  animation: animloader 2s linear infinite alternate;
-}
-
-@keyframes animloader {
-  0% {
-    transform: rotate(-70deg);
-  }
-  10% {
-    transform: rotate(-40deg);
-  }
-  20%, 45%, 35% {
-    transform: rotate(-10deg);
-  }
-  40%, 30% {
-    transform: rotate(-30deg);
-  }
-  50%, 60% {
-    transform: rotate(20deg);
-  }
-  55%, 65%, 75% {
-    transform: rotate(40deg);
-  }
-  70% {
-    transform: rotate(45deg);
-  }
-  85%, 90% {
-    transform: rotate(50deg);
-  }
-  95% {
-    transform: rotate(75deg);
-  }
-  100%, 93% {
-    transform: rotate(70deg);
-  }
-}
-`,
-    }, 
-    
-    
-    
-    {
-        id: "sbxrg21wokq",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: block;
-  margin: 20px auto;
-  position: relative;
-  border: 3px solid #FFF;
-  border-radius: 50%;
-  box-sizing: border-box;
-  animation: animloader 2s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  width: 6px;
-  height: 24px;
-  background: #FFF;
-  transform: rotate(-45deg);
-  position: absolute;
-  bottom: -20px;
-  left: 46px;
-}
-
-@keyframes animloader {
-  0% {
-    transform: translate(-10px, -10px);
-  }
-  25% {
-    transform: translate(-10px, 10px);
-  }
-  50% {
-    transform: translate(10px, 10px);
-  }
-  75% {
-    transform: translate(10px, -10px);
-  }
-  100% {
-    transform: translate(-10px, -10px);
-  }
-}
-    `,
-    }, {
-        id: "4drk3f63i44",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: block;
-  margin: 20px auto;
-  box-sizing: border-box;
-  position: relative;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  left: 0;
-  bottom: 0;
-  position: absolute;
-  border-radius: 50% 50% 0;
-  border: 15px solid #FFF;
-  transform: rotate(45deg) translate(0, 0);
-  box-sizing: border-box;
-  animation: animMarker 0.4s ease-in-out infinite alternate;
-}
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin: auto;
-  top: 150%;
-  width: 24px;
-  height: 4px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.2);
-  animation: animShadow 0.4s ease-in-out infinite alternate;
-}
-
-@keyframes animMarker {
-  0% {
-    transform: rotate(45deg) translate(5px, 5px);
-  }
-  100% {
-    transform: rotate(45deg) translate(-5px, -5px);
-  }
-}
-
-@keyframes animShadow {
-  0% {
-    transform: scale(0.5);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-    `,
-    }, {
-        id: "9p7nroeguim",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 48px;
-  background: #FF3D00;
-  display: block;
-  margin: 20px auto;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotationBack 1s ease-in-out infinite reverse;
-}
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  left: 0;
-  top: 0;
-  transform: rotate(45deg);
-  position: absolute;
-  width: 48px;
-  height: 48px;
-  background: #FF3D00;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  background: #FFF;
-  transform: translate(-50%, -50%);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-}
-@keyframes rotationBack {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(-360deg);
-  }
-}
-`,
-    }, {
-        id: "cctrtq4l314",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 60px;
-  height: 60px;
-  display: block;
-  margin: 20px auto;
-  position: relative;
-  background: radial-gradient(ellipse at center, #FFF 69%, rgba(0, 0, 0, 0) 70%), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #FFF 48%, #FFF 52%, rgba(0, 0, 0, 0) 53%);
-  background-size: 20px 20px , 20px auto;
-  background-repeat: repeat-x;
-  background-position: center bottom, center -5px;
-  box-sizing: border-box;
-}
-.loader::before,
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: -20px;
-  top: 0;
-  width: 20px;
-  height: 60px;
-  background: radial-gradient(ellipse at center, #FFF 69%, rgba(0, 0, 0, 0) 70%), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #FFF 48%, #FFF 52%, rgba(0, 0, 0, 0) 53%);
-  background-size: 20px 20px , 20px auto;
-  background-repeat: no-repeat;
-  background-position: center bottom, center -5px;
-  transform: rotate(0deg);
-  transform-origin: 50% 0%;
-  animation: animPend 1s linear infinite alternate;
-}
-.loader::after {
-  animation: animPend2 1s linear infinite alternate;
-  left: 100%;
-}
-
-@keyframes animPend {
-  0% {
-    transform: rotate(22deg);
-  }
-  50% {
-    transform: rotate(0deg);
-  }
-}
-
-@keyframes animPend2 {
-  0%, 55% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(-22deg);
-  }
-}
-`,
-    },
-    
-    
-  {
-    id: "anbeLighup",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 4px;
-  height: 86px;
-  background: #fff;
-  margin: auto;
-  position: relative;
-  animation: shake 1s linear infinite alternate,
-             lightup 1s linear infinite;
-  transform-origin: 0 0;
-}
-
-.loader::before {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 100%;
-  transform: translateX(-50%);
-  width: 32px;
-  height: 16px;
-  box-sizing:border-box;
-  border: 5px solid #FF3D00;
-  border-top: none;
-  border-radius: 0 0 20px 20px;
-}
-.loader::after {
-  content: '';
-  left: 50%;
-  bottom: 0;
-  position: absolute;
-  transform: translateX(-50%);
-  width: 64px;
-  height: 32px;
-  border-radius: 50px 50px 0 0;
-  background: #fff;
-}
-
-@keyframes shake {
-  0% { transform: rotate(10deg)  }
-  100% { transform: rotate(-10deg)  }
-}
-@keyframes lightup {
-  0% ,20% , 40% {
-    opacity: 0
-  }
-  10%, 30% , 50% , 100% {
-    opacity: 1
-  }
-}
-    `
-  },
-    
-    
-    
-    {
-        id: "2hmjm05ufjc",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 24px;
-  height: 80px;
-  display: block;
-  margin: 35px auto 0;
-  border: 1px solid #FFF;
-  border-radius: 0 0 50px 50px;
-  position: relative;
-  box-shadow: 0px 0px #FF3D00 inset;
-  background-image: linear-gradient(#FF3D00 100px, transparent 0);
-  background-position: 0px 0px;
-  background-size: 22px 80px;
-  background-repeat: no-repeat;
-  box-sizing: border-box;
-  animation: animloader 6s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  top: -6px;
-  left: 50%;
-  transform: translateX(-50%);
-  position: absolute;
-  border: 1px solid #FFF;
-  border-radius: 50%;
-  width: 28px;
-  height: 6px;
-}
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  left: 0;
-  bottom: -4px;
-  border-radius: 50%;
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  animation: animloader1 6s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    background-position: 0px 80px;
-  }
-  100% {
-    background-position: 0px 0px;
-  }
-}
-
-@keyframes animloader1 {
-  0% {
-    box-shadow: 4px -10px rgba(255, 255, 255, 0), 6px 0px rgba(255, 255, 255, 0), 8px -15px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0);
-  }
-  20% {
-    box-shadow: 4px -20px rgba(255, 255, 255, 0), 8px -10px rgba(255, 255, 255, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 255, 255, 0);
-  }
-  40% {
-    box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 255, 255, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
-  }
-  60% {
-    box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 255, 255, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
-  }
-  80% {
-    box-shadow: 2px -80px rgba(255, 255, 255, 0.5), 4px -70px rgba(255, 255, 255, 0.4), 8px -120px rgba(255, 255, 255, 0), 12px -35px rgba(255, 255, 255, 0.5);
-  }
-  100% {
-    box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0);
-  }
-}
-
-`,
-    },
-
-        
-    {
-        id: "bakenLoading89frbbl",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-              width: 64px;
-              height: 64px;
-              display: block;
-              border: 1px solid #FFF;
-              border-radius: 50px ;
-              position: relative;
-              box-shadow: 0px 0px #FF3D00 inset;
-              background-color: #fff;
-              background-image: linear-gradient(#FF3D00 100px, transparent 0);
-              background-position: 0  20px;
-              background-size: 100% auto;
-              background-repeat: no-repeat;
-              box-sizing: border-box;
-            }
-            .loader::after {
-              content: '';
-              box-sizing: border-box;
-              position: absolute;
-              left: 50%;
-              top: 0%;
-              transform: translate(-50% , -95%);
-              border: 2px solid #FFF;
-              border-bottom: none;
-              background: #fff;
-              width: 15px;
-              height: 35px;
-            }
-            .loader::before {
-              content: '';
-              box-sizing: border-box;
-              left: 50%;
-              transform: translateX(-125%);
-              bottom: -4px;
-              border-radius: 50%;
-              position: absolute;
-              width: 6px;
-              height: 6px;
-              z-index: 10;
-              animation: bubbles 6s linear infinite;
-            }
-            @keyframes bubbles {
-              0% {
-                box-shadow: 4px -10px rgba(255, 0, 0, 0), 6px 0px rgba(255, 0, 0, 0), 8px -15px rgba(255, 0, 0, 0), 12px 0px rgba(255, 0, 0, 0);
-              }
-              20% {
-                box-shadow: 4px -20px rgba(255, 0, 0, 0), 8px -10px rgba(255, 0, 0, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 0, 0, 0);
-              }
-              40% {
-                box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 0, 0, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
-              }
-              60% {
-                box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 0, 0, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
-              }
-              80% {
-                box-shadow: 2px -80px rgba(255, 0, 0, 0.5), 4px -70px rgba(255, 0, 0, 0.4), 8px -120px rgba(255, 0, 0, 0), 12px -35px rgba(255, 0, 0, 0.5);
-              }
-              100% {
-                box-shadow: 4px -100px rgba(255, 0, 0, 0), 8px -90px rgba(255, 0, 0, 0), 10px -120px rgba(255, 0, 0, 0), 15px -45px rgba(255, 0, 0, 0);
-              }
-            }
-    `,
-    },
-
-
-  {
-    id: "spearGlassFillre",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        position: relative;
-        width: 120px;
-        height: 120px;
-        border-radius: 50%;
-        box-shadow: inset 0 0 20px -5px rgba(255, 255, 255, 0.5),
-                inset 0 -40px 40px -20px rgba(255, 255, 255, 0.5);
-        background: linear-gradient(#FF3D00 120px, transparent 0) no-repeat;
-        background-position: 0px 120px;
-        animation: fillLq 10s linear infinite alternate;
-      }
-      .loader:before {
-        position: absolute;
-        content: '';
-        width: 40%;
-        height: 25%;
-        top: 20px;
-        left: 10px;
-        background: rgba(255,255,255,0.1);
-        border-radius: 50%;
-        transform: rotate(-45deg);
-      }
-
-      @keyframes fillLq {
-        0% , 10% { background-position: 0 120px}
-        90% , 100% { background-position: 0 0}
-      }
-    `,
-    },
-
-    
-    {
-        id: "c0g9cavcnfd",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 20px;
-  height: 20px;
-  display: block;
-  margin: 80px auto 20px;
-  border-radius: 50%;
-  background: #FF3D00;
-  border: 5px solid #FFF;
-  position: relative;
-  box-sizing: border-box;
-}
-.loader::before {
-  content: '';  
-  position: absolute;
-  left: 50%;
-  bottom: 10px;
-  transform: translateX(-50%);
-  width: 8px;
-  height: 80px;
-  border: 2px solid #FFF;
-  border-bottom: none;
-  background: #FFF;
-  color: #FF3D00;
-  border-radius: 50px 50px 0 0;
-  box-shadow: 0px 0px  inset;
-  box-sizing: border-box;
-  animation: animloader 6s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 0px 0px  inset;
-  }
-  100% {
-    box-shadow: 0px -80px  inset;
-  }
-}
-`,
-    },
-  {
-    id: "sprLgLdg",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    width: 150px;
-    height: 150px;
-    background-color: #ff3d00;
-    border-radius: 50%;
-    position: relative;
-    box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5) inset,
-      0 5px 12px rgba(0, 0, 0, 0.15);
-    overflow: hidden;
-  }
-  .loader:before,
-  .loader:after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 45%;
-    top: -40%;
-    background-color: #fff;
-    animation: wave 5s linear infinite;
-  }
-  .loader:before {
-    border-radius: 30%;
-    background: rgba(255, 255, 255, 0.4);
-    animation: wave 5s linear infinite;
-  }
-  @keyframes wave {
-    0% {
-      transform: rotate(0);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`,
-  },
-
-  {
-    id: "cheLoad",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 96px;
-  box-sizing: content-box;
-  height: 48px;
-  background: #FFF;
-  border-color: #de3500;
-  border-style: solid;
-  border-width: 2px 2px 50px 2px;
-  border-radius: 100%;
-  position: relative;
-  animation: 3s yinYang linear infinite;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 0;
-  background: #FFF;
-  border: 18px solid #de3500;
-  border-radius: 100%;
-  width: 12px;
-  height: 12px;
-  box-sizing: content-box;
-}
-.loader:after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  background: #de3500;
-  border: 18px solid #FFF;
-  border-radius: 100%;
-  width: 12px;
-  height: 12px;
-  box-sizing: content-box;
-}
-@keyframes yinYang {
-  100%{transform: rotate(360deg)}
-}
-`,
-  },
-
-  {
-  id: "mouseScrDwn",
-  html: `<span class="loader"></span>`,
-  css: `.loader {
-  width: 48px;
-  height: 78px;
-  box-sizing: border-box;
-  border: 2px solid #fff;
-  position: relative;
-  border-radius: 50% 50% 50% 50% / 25% 25% 25% 25%;
-}
-
-.loader::before {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 0;
-  transform: translate(-50% , 50%);
-  width: 10px;
-  height: 10px;
-  background: #FFF;
-  border-radius: 50%;
-  animation: fadeDown 1s ease-out infinite;
-}
-
-@keyframes fadeDown {
-  0% {
-    top: 0%;
-    opacity: 1;
-  }
-  100% {
-    top: 60%;
-    opacity: 0;
-  }
-}
-`,
-  },
-{
-  id: "mouseLnScrDwn",
-  html: `<span class="loader"></span>`,
-  css: `.loader {
-  width: 48px;
-  height: 78px;
-  position: relative;
-  box-sizing: border-box;
-  border: 2px solid #fff;
-  margin: auto;
-  border-radius: 50% 50% 50% 50% / 25% 25% 25% 25%;
-}
-.loader::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 20px;
-  transform: translateX(-50%);
-  width: 4px;
-  height: 4px;
-  background: #fff;
-  border-radius: 10px;
-  animation: scrollDown 1.5s linear infinite;
-}
-@keyframes scrollDown {
-  0% {
-    top: 15px;
-    height: 4px;
-    opacity: 1;
-  }
-  33% {
-    top: 15px;
-    height: 40px;
-  }
-  66% {
-    top: 50px;
-    height: 10px;
-    opacity: 1;
-  }
-  100% {
-    top: 56px;
-    height: 4px;
-    opacity: 0;
-  }
-}
-`,
-  },
-  {
-    id: "mouseBallBounce",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 48px;
-  height: 86px;
-  position: relative;
-}
-
-.loader::before {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 0;
-  transform: translate(-50% , 50%);
-  width: 10px;
-  height: 10px;
-  background: #FFF;
-  border-radius: 50%;
-  animation: bounce 1s ease-in infinite alternate;
-}
-.loader::after {
-  content: '';
-  left: 0;
-  top: 0;
-  position: absolute;
-  width: 48px;
-  height: 86px;
-  box-sizing: border-box;
-  border: 2px solid #fff;
-  border-radius: 50% 50% 50% 50% / 25% 25% 25% 25%;
-  animation: kick 1s ease-in infinite alternate;
-}
-
-@keyframes bounce {
-  0% {
-    top: 0%;
-    opacity: 1;
-  }
-  100% {
-    top: 75%;
-    opacity: 0.2;
-  }
-}
-@keyframes kick {
-  0% , 75% {
-    height: 86px
-  }
-   100% {
-    height: 78px
-  }
-}
-`,
-  },
-
-
-
-
-     {
-        id: "8fzm1l50fw4",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 180px;
-  height: 140px;
-  display: block;
-  margin: 0 auto 20px;
-  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 15px at 15px 15px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
-  background-size: 50px 50px, 100px 75px, 50px 50px, 30px 32px, 136px 20px;
-  background-repeat: no-repeat;
-  background-position: 0px 30px, 30px 0px, 113px 29px, 147px 50px, 23px 60px;
-  position: relative;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: '';  
-  position: absolute;
-  left: 2px;
-  top: 65px;
-  width: 2px;
-  height: 6px;
-  color: #FFF;
-  box-sizing: border-box;
-  animation: animloader 0.6s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white, 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white;
-  }
-  50% {
-    box-shadow: 25px 20px white, 50px 60px rgba(255, 255, 255, 0), 75px 30px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 40px white, 150px 60px rgba(255, 255, 255, 0), 25px 20px white, 50px 30px white, 75px 10px white, 100px 30px white, 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
-  }
-  100% {
-    box-shadow: 25px 60px rgba(255, 255, 255, 0), 50px 60px rgba(255, 255, 255, 0), 75px 50px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 70px rgba(255, 255, 255, 0), 150px 60px rgba(255, 255, 255, 0), 25px 80px rgba(255, 255, 255, 0), 50px 80px rgba(255, 255, 255, 0), 75px 70px rgba(255, 255, 255, 0), 100px 60px rgba(255, 255, 255, 0), 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
-  }
-}
-`,
-    }, {
-        id: "33du42ob36g",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 175px;
-  height: 80px;
-  display: block;
-  margin: auto;
-  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
-  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
-  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
-  background-repeat: no-repeat;
-  position: relative;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: '';  
-  left: 50%;
-  bottom: 0;
-  transform: translate(-50%, 0);
-  position: absolute;
-  border: 15px solid transparent;
-  border-top-color: #FF3D00;
-  box-sizing: border-box;
-  animation: fadePush 1s linear infinite;
-}
-.loader::before {
-  content: '';  
-  left: 50%;
-  bottom: 30px;
-  transform: translate(-50%, 0);
-  position: absolute;
-  width: 15px;
-  height: 15px;
-  background: #FF3D00;
-  box-sizing: border-box;
-  animation: fadePush 1s linear infinite;
-}
-
-@keyframes fadePush {
-  0% {
-    transform: translate(-50%, -15px);
-    opacity: 0;
-  }
-  50% {
-    transform: translate(-50%, 0px);
-    opacity: 1;
-  }
-  100% {
-    transform: translate(-50%, 15px);
-    opacity: 0;
-  }
-}
-`,
-    }, {
-        id: "ni0hjvor5u8",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 175px;
-  height: 80px;
-  display: block;
-  margin: auto;
-  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
-  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
-  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
-  background-repeat: no-repeat;
-  position: relative;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: '';  
-  left: 50%;
-  bottom: 30px;
-  transform: translate(-50%, 0);
-  position: absolute;
-  border: 15px solid transparent;
-  border-bottom-color: #FF3D00;
-  box-sizing: border-box;
-  animation: fadePull 1s linear infinite;
-}
-.loader::before {
-  content: '';  
-  left: 50%;
-  bottom: 15px;
-  transform: translate(-50%, 0);
-  position: absolute;
-  width: 15px;
-  height: 15px;
-  background: #FF3D00;
-  box-sizing: border-box;
-  animation: fadePull 1s linear infinite;
-}
-
-@keyframes fadePull {
-  0% {
-    transform: translate(-50%, 15px);
-    opacity: 0;
-  }
-  50% {
-    transform: translate(-50%, 0px);
-    opacity: 1;
-  }
-  100% {
-    transform: translate(-50%, -15px);
-    opacity: 0;
-  }
-}
-`,
-    }, {
-        id: "7j8brpzvb5b",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 175px;
-  height: 80px;
-  display: block;
-  margin: auto;
-  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
-  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
-  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
-  background-repeat: no-repeat;
-  position: relative;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: '';  
-  left: 0;
-  right: 0;
-  margin: auto;
-  bottom: 20px;
-  position: absolute;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  border: 5px solid transparent;
-  border-color: #FF3D00 transparent;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "n6di2ljxvon",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 175px;
-  height: 80px;
-  display: block;
-  margin:auto;
-  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
-  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
-  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
-  background-repeat: no-repeat;
-  position: relative;
-  box-sizing: border-box;
-}
-.loader::before {
-  content: '';  
-  left: 60px;
-  bottom: 18px;
-  position: absolute;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: #FF3D00;
-  background-image: radial-gradient(circle 8px at 18px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, #FFF 100%, transparent 0);
-  background-repeat: no-repeat;
-  box-sizing: border-box;
-  animation: rotationBack 3s linear infinite;
-}
-.loader::after {
-  content: '';  
-  left: 94px;
-  bottom: 15px;
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: #FF3D00;
-  background-image: radial-gradient(circle 5px at 12px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, #FFF 100%, transparent 0);
-  background-repeat: no-repeat;
-  box-sizing: border-box;
-  animation: rotationBack 4s linear infinite reverse;
-}
-
-@keyframes rotationBack {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(-360deg);
-  }
-}
-`,
-    }, {
-        id: "yyrv9o4qr4",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 175px;
-  height: 80px;
-  display: block;
-  margin:auto;
-  background-image: linear-gradient(#263238 50px, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
-  background-size: 64px 6px, 50px 50px, 100px 76px, 50px 50px, 120px 40px;
-  background-position: 55px 60px, 0px 30px, 37px 0px, 122px 30px, 25px 40px;
-  background-repeat: no-repeat;
-  position: relative;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: '';  
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%) rotate(-180deg);
-  top: 62px;
-  height: 64px;
-  width: 60px;
-  background-color: #FFF;
-  background-image: linear-gradient(#DDD 20px, transparent 0), linear-gradient(#DDD 5px, transparent 0), linear-gradient(#DDD 10px, transparent 0), linear-gradient(#DDD 10px, transparent 0);
-  background-size: 50px 20px;
-  background-position: 5px 36px, 5px 25px, 5px 10px;
-  background-repeat: no-repeat;
-  border-radius: 2px 2px 4px 4px;
-  z-index: 10;
-  box-shadow: 0px -4px 7px rgba(0, 0, 0, 0.5);
-  box-sizing: border-box;
-  animation: animloader 4s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    height: 64px;
-  }
-  90%, 100% {
-    height: 0px;
-  }
-}
-`,
-    }, 
-    
-     {
-        id: "povx9w7f6a",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 48px;
-  height: 24px;
-  color: #FFF;
-  background: currentColor;
-  border-radius: 50% 50% 0 0;
-  position: relative;
-  display: block;
-  margin: 60px auto 0;
-  box-sizing: border-box;
-  animation: animloader 4s linear infinite;
-}
-.loader::after {
-  content: '';  
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: currentColor;
-  top: -34px;
-  box-sizing: border-box;
-  animation: animloader1 4s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 0 0 0 -2px , 0 0 0 -2px , 0 0 0 -5px , 0 0 0 -5px;
-  }
-  20% {
-    box-shadow: 40px -1px 0 -2px , 0 0 0 -2px , 40px -1px 0 -5px , 0 0 0 -5px;
-  }
-  40% {
-    box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px ,  40px -1px 0 -5px ,-40px -1px 0 -5px;
-  }
-  60% {
-    box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px ,   23px -29px 0 -5px ,-40px -1px 0 -5px;
-  }
-  80%, 95% {
-    box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px ,   23px -29px 0 -5px , -23px -29px 0 -5px;
-  }
-  100% {
-    box-shadow: 40px -1px 0 -2px rgba(255, 255, 255, 0), -40px -1px 0 -2px rgba(255, 255, 255, 0), 23px -29px 0 -5px rgba(255, 255, 255, 0), -23px -29px 0 -5px rgba(255, 255, 255, 0);
-  }
-}
-
-@keyframes animloader1 {
-  0% {
-    box-shadow: 0 0 0 -2px , 0 0 0 -2px , 0 0 0 -5px , 0 0 0 -5px;
-  }
-  20% {
-    box-shadow: 40px 2px 0 -2px  , 0 0 0 -2px , 40px 2px 0 -5px , 0 0 0 -5px;
-  }
-  40% {
-    box-shadow: 40px 2px 0 -2px  , -40px 2px 0 -2px , 40px 2px 0 -5px , -40px 2px 0 -5px;
-  }
-  60% {
-    box-shadow: 40px 2px 0 -2px  , -40px 2px 0 -2px , 23px -23px 0 -5px , -40px 2px 0 -5px;
-  }
-  80%, 95% {
-    box-shadow: 40px 2px 0 -2px  , -40px 2px 0 -2px , 23px -23px 0 -5px , -23px -23px 0 -5px;
-  }
-  100% {
-    box-shadow: 40px 2px 0 -2px rgba(255, 255, 255, 0), -40px 2px 0 -2px rgba(255, 255, 255, 0), 23px -23px 0 -5px rgba(255, 255, 255, 0), -23px -23px 0 -5px rgba(255, 255, 255, 0);
-  }
-}
-`,
-    },
-
-
-  {
-    id: "gayoz753h8n",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 106px;
-  height: 56px;
-  display: block;
-  margin: 30px auto;
-  background-image: linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), radial-gradient(circle 14px, #FFF 100%, transparent 0);
-  background-size: 48px 15px , 15px 35px, 15px 35px, 25px 15px, 28px 28px;
-  background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
-  background-repeat: no-repeat;
-  position: relative;
-  transform: rotate(-45deg);
-  box-sizing: border-box;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  position: absolute;
-  width: 56px;
-  height: 56px;
-  border: 6px solid #FFF;
-  border-radius: 50%;
-  left: -45px;
-  top: -10px;
-  background-repeat: no-repeat;
-  background-image: linear-gradient(#FFF 64px, transparent 0), linear-gradient(#FFF 66px, transparent 0), radial-gradient(circle 4px, #FFF 100%, transparent 0);
-  background-size: 40px 1px , 1px 40px, 8px 8px;
-  background-position: center center;
-  box-sizing: border-box;
-  animation: rotation 0.3s linear infinite;
-}
-.loader::before {
-  left: 25px;
-  top: 60px;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-  },
-  {
-    id: "carDashrse",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-          position: relative;
-    width: 164px;
-    height: 164px;
-    border-radius: 50%;
-    animation: rotate 0.75s linear infinite;
-  }
-  .loader::before {
-    content: '';
-    position: absolute;
-    width: 20px;
-    height: 40px;
-    border: 1px solid #FF3D00;
-    border-width: 12px 2px 7px;
-    border-radius: 2px 2px 1px 1px;
-    box-sizing: border-box;
-    transform: rotate(45deg) translate(24px, -10px);
-    background-image: linear-gradient(#FF3D00 20px, transparent 0),
-    linear-gradient(#FF3D00 30px, transparent 0),
-    linear-gradient(#FF3D00 30px, transparent 0);
-    background-size: 10px 12px , 1px 30px, 1px 30px;
-    background-repeat: no-repeat;
-    background-position: center , 12px 0px , 3px 0px;
-}
-  .loader::after {
-    content: '';
-    position: absolute;
-    height: 4px;
-    width: 4px;
-    left: 20px;
-    top: 47px;
-    border-radius: 50%;
-    color: #Fff;
-    box-shadow: -4px 7px 2px, -7px 16px 3px 1px,
-      -11px 24px 4px 1px, -6px 24px 4px 1px,
-      -14px 35px 6px 2px, -5px 36px 8px 2px,
-      -5px 45px 8px 2px, -14px 49px 8px 2px,
-      6px 60px 11px 1px, -11px 66px 11px 1px,
-      11px 75px 13px, -1px 82px 15px;
-  }
-
-@keyframes rotate {
-  to{transform:rotate(360deg)   }
-}
-  `,
-  },
-  {
-    id: "starLord-andro6e",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-            position: relative;
-            animation: flix 3s ease-in infinite alternate;
-          }
-          .loader:before {
-            content: '';
-            display: block;
-            font-size: 0;
-            width: 48px;
-            height: 48px;
-            background-color: #fff ;
-            background-image:
-              radial-gradient(circle 12px at 22px 22px, #FF3D00 100%, transparent 0),
-              radial-gradient(circle 10px at 6px 40px, #FF3D00 100%, transparent 0),
-              radial-gradient(circle 14px at 31px -6px, #FF3D00 100%, transparent 0),
-              radial-gradient(circle 5px at 40px 30px, #FF3D00 100%, transparent 0);
-            border-radius: 50%;
-            animation: rotate 1s linear infinite;
-          }
-          .loader:after {
-              content: '';
-              position: absolute;
-              top: 0%;
-              transform: translate(-50% , -100%);
-              left: 50%;
-              width: 24px;
-              height: 12px;
-              background: #fff;
-              border-radius: 50px 50px 0 0;
-            }
-
-          @keyframes flix {
-            0%  , 60% { transform: rotate(-10deg)}
-            100%  , 30% , 80% { transform: rotate(5deg)}
-          }
-          @keyframes rotate {
-            100%   { transform: rotate(360deg)}
-          }
-`,
-  },
-  {
-    id: "rockets-luncRd",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 32px;
-  height: 90px;
-  display: block;
-  margin: 20px auto;
-  position: relative;
-  border-radius: 50% 50% 0 0;
-  border-bottom: 10px solid #FF3D00;
-  background-color: #FFF;
-  background-image: radial-gradient(ellipse at center, #FFF 34%, #FF3D00 35%, #FF3D00 54%, #FFF 55%), linear-gradient(#FF3D00 10px, transparent 0);
-  background-size: 28px 28px;
-  background-position: center 20px , center 2px;
-  background-repeat: no-repeat;
-  box-sizing: border-box;
-  animation: animloaderBack 1s linear infinite alternate;
-}
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 64px;
-  height: 44px;
-  border-radius: 50%;
-  box-shadow: 0px 15px #FF3D00 inset;
-  top: 67px;
-}
-.loader::after {
-  content: '';  
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%) rotate(45deg);
-  width: 34px;
-  height: 34px;
-  top: 112%;
-  background: radial-gradient(ellipse at center, #ffdf00 8%, rgba(249, 62, 0, 0.6) 24%, rgba(0, 0, 0, 0) 100%);
-  border-radius: 50% 50% 0;
-  background-repeat: no-repeat;
-  background-position: -44px -44px;
-  background-size: 100px 100px;
-  box-shadow: 4px 4px 12px 0px rgba(255, 61, 0, 0.5);
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite alternate;
-}
-
-@keyframes animloaderBack {
-  0%, 30%, 70% {
-    transform: translateY(0px);
-  }
-  20%, 40%, 100% {
-    transform: translateY(-5px);
-  }
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 4px 4px 12px 2px rgba(255, 61, 0, 0.75);
-    width: 34px;
-    height: 34px;
-    background-position: -44px -44px;
-    background-size: 100px 100px;
-  }
-  100% {
-    box-shadow: 2px 2px 8px 0px rgba(255, 61, 0, 0.5);
-    width: 30px;
-    height: 28px;
-    background-position: -36px -36px;
-    background-size: 80px 80px;
-  }
-}
-`,
-  },
-  {
-    id: "truckLd",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-  width: 130px;
-  height: 100px;
-  background-repeat: no-repeat;
-  background-image: linear-gradient(#0277bd, #0277bd),
-  linear-gradient(#29b6f6, #4fc3f7), linear-gradient(#29b6f6, #4fc3f7);
-  background-size: 80px 70px, 30px 50px, 30px 30px;
-  background-position: 0 0, 80px 20px, 100px 40px;
-}
-.loader:after {
-  content: "";
-  position: absolute;
-  bottom: 10px;
-  left: 12px;
-  width: 10px;
-  height: 10px;
-  background: #fff;
-  border-radius: 50%;
-  box-sizing: content-box;
-  border: 10px solid #000;
-  box-shadow: 78px 0 0 -10px #fff, 78px 0 #000;
-  animation: wheelSk 0.75s ease-in infinite alternate;
-}
-
-.loader:before {
-  content: "";
-  position: absolute;
-  right: 100%;
-  top: 0px;
-  height: 70px;
-  width: 70px;
-  background-image: linear-gradient(#fff 45px, transparent 0),
-    linear-gradient(#fff 45px, transparent 0),
-    linear-gradient(#fff 45px, transparent 0);
-  background-repeat: no-repeat;
-  background-size: 30px 4px;
-  background-position: 0px 11px, 8px 35px, 0px 60px;
-  animation: lineDropping 0.75s linear infinite;
-}
-
-@keyframes wheelSk {
-  0%, 50%, 100% { transform: translatey(0) }
-  30%, 90% { transform: translatey(-3px) }
-}
-
-@keyframes lineDropping {
-  0% {
-    background-position: 100px 11px, 115px 35px, 105px 60px;
-    opacity: 1;
-  }
-  50% { background-position: 0px 11px, 20px 35px, 5px 60px }
-  60% { background-position: -30px 11px, 0px 35px, -10px 60px }
-  75%, 100% {
-    background-position: -30px 11px, -30px 35px, -30px 60px;
-    opacity: 0;
-  }
-}
-`,
-  },
-  
-]
\ No newline at end of file
diff --git a/js/loaders/progress.js b/js/loaders/progress.js
deleted file mode 100644
index 2192136..0000000
--- a/js/loaders/progress.js
+++ /dev/null
@@ -1,966 +0,0 @@
-export const PROGRESS = [
-    {
-        id: "bbi2epoor36",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 100%;
-  height: 4.8px;
-  display: inline-block;
-  position: relative;
-  background: rgba(255, 255, 255, 0.15);
-  overflow: hidden;
-}
-.loader::after {
-  content: '';
-  width: 96px;
-  height: 4.8px;
-  background: #FFF;
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  animation: hitZak 1s linear infinite alternate;
-}
-
-@keyframes hitZak {
-  0% {
-    left: 0;
-    transform: translateX(-1%);
-  }
-  100% {
-    left: 100%;
-    transform: translateX(-99%);
-  }
-}
-    `,
-    }, {
-        id: "5pxufwt6k9",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 100%;
-  height: 4.8px;
-  display: inline-block;
-  position: relative;
-  background: rgba(255, 255, 255, 0.15);
-  overflow: hidden;
-}
-.loader::after {
-  content: '';
-  width: 192px;
-  height: 4.8px;
-  background: #FFF;
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  animation: animloader 2s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    left: 0;
-    transform: translateX(-100%);
-  }
-  100% {
-    left: 100%;
-    transform: translateX(0%);
-  }
-}
-    `,
-    }, {
-        id: "n1vy1hfmljq",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 100%;
-  height: 4.8px;
-  display: inline-block;
-  position: relative;
-  background: rgba(255, 255, 255, 0.15);
-  overflow: hidden;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  width: 0;
-  height: 4.8px;
-  background: #FFF;
-  position: absolute;
-  top: 0;
-  left: 0;
-  animation: animFw 10s linear infinite;
-}
-
-@keyframes animFw {
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-}`,
-    }, {
-        id: "prog-crak-erh",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 0;
-  height: 4.8px;
-  display: inline-block;
-  position: relative;
-  background: #FFF;
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
-  box-sizing: border-box;
-  animation: animFw 8s linear infinite;
-}
-  .loader::after,
-  .loader::before {
-    content: '';
-    width: 10px;
-    height: 1px;
-    background: #FFF;
-    position: absolute;
-    top: 9px;
-    right: -2px;
-    opacity: 0;
-    transform: rotate(-45deg) translateX(0px);
-    box-sizing: border-box;
-    animation: coli1 0.3s linear infinite;
-  }
-  .loader::before {
-    top: -4px;
-    transform: rotate(45deg);
-    animation: coli2 0.3s linear infinite;
-  }
-
-@keyframes animFw {
-    0% {
-  width: 0;
-}
-    100% {
-  width: 100%;
-}
-  }
-
-@keyframes coli1 {
-    0% {
-  transform: rotate(-45deg) translateX(0px);
-  opacity: 0.7;
-}
-    100% {
-  transform: rotate(-45deg) translateX(-45px);
-  opacity: 0;
-}
-  }
-
-@keyframes coli2 {
-    0% {
-  transform: rotate(45deg) translateX(0px);
-  opacity: 1;
-}
-    100% {
-  transform: rotate(45deg) translateX(-45px);
-  opacity: 0.7;
-}
-  }
-  `,
-    }, {
-        id: "25fy52yspad",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 100%;
-  height: 4.8px;
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-}
-.loader::after {
-  content: '';  
-  width: 96px;
-  height: 4.8px;
-  background: #FFF;
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  animation: hitZak 0.6s ease-in-out infinite alternate;
-}
-
-@keyframes hitZak {
-  0% {
-    left: 0;
-    transform: translateX(-1%);
-  }
-  100% {
-    left: 100%;
-    transform: translateX(-99%);
-  }
-}
-    `,
-    }, {
-        id: "4tf5qf1n26l",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 100%;
-  height: 4.8px;
-  display: inline-block;
-  background: rgba(255, 255, 255, 0.15);
-  position: relative;
-  overflow: hidden;
-}
-.loader::after {
-  content: '';  
-  width: 0%;
-  height: 4.8px;
-  background-color: #FFF;
-  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
-  background-size: 15px 15px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  animation: animFw 6s ease-in infinite;
-}
-
-@keyframes animFw {
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-}
-    `,
-    }, {
-        id: "66tdwbfi0l4",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 100%;
-  height: 4.8px;
-  display: inline-block;
-  background: rgba(255, 255, 255, 0.15);
-  position: relative;
-  overflow: hidden;
-}
-.loader::after {
-  content: '';  
-  width: 0%;
-  height: 4.8px;
-  background-color: #FFF;
-  font-size: 15px;
-  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
-  background-size: 1em 1em;
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  animation: animFw 10s ease-in infinite,  barStripe 1s linear infinite;
-}
-
-@keyframes barStripe {
-  0% {
-    background-position: 1em 0;
-  }
-  100% {
-    background-position: 0 0;
-  }
-}
-
-@keyframes animFw {
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-}
-    `,
-    }, {
-        id: "9r801t4h2hk",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 100%;
-  height: 8px;
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-}
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  background-color: rgba(255, 255, 255, 0.15);
-  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
-  background-size: 15px 15px;
-  z-index: 10;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  width: 0%;
-  height: 100%;
-  background-color: #FFF;
-  position: absolute;
-  border-radius: 0 4px 4px 0;
-  top: 0;
-  left: 0;
-  animation: animFw 10s ease-in infinite;
-}
-
-
-@keyframes animFw {
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-}
-    `,
-    }, {
-        id: "xnc4clnb6t",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 100%;
-  height: 12px;
-  display: inline-block;
-  background-color: #FFF;
-  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
-  font-size: 30px;
-  background-size: 1em 1em;
-  box-sizing: border-box;
-  animation: barStripe 1s linear infinite;
-}
-
-@keyframes barStripe {
-  0% {
-    background-position: 1em 0;
-  }
-  100% {
-    background-position: 0 0;
-  }
-}`,
-    }, {
-        id: "s9l644spxrp",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 96px;
-  height: 16px;
-  display: inline-block;
-  background-color: #FFF;
-  border: 1px solid #FFF;
-  border-radius: 4px;
-  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
-  font-size: 30px;
-  background-size: 1em 1em;
-  box-sizing: border-box;
-  animation: barStripe 1s linear infinite;
-}
-
-@keyframes barStripe {
-  0% {
-    background-position: 1em 0;
-  }
-  100% {
-    background-position: 0 0;
-  }
-}`,
-    },
-    
-    {
-      id: "prog-fill",
-      html: `<span class="loader"></span>`,
-      css: `.loader{
-        display: block;
-        position: relative;
-        height: 12px;
-        width: 80%;
-        border: 1px solid #fff;
-        border-radius: 10px;
-        overflow: hidden;
-      }
-      .loader:after{
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        height: 100%;
-        width: 0;
-        background: #FF3D00;
-        animation: 6s prog ease-in infinite;
-      }
-      
-      @keyframes prog {
-        to  {   width: 100%;}
-      }
-      `,
-  }, 
-  {
-    id: "prog-go-line",
-    html: `<span class="loader"></span>`,
-    css: `.loader{
-      display: block;
-      position: relative;
-      height: 12px;
-      width: 80%;
-      border: 1px solid #fff;
-      border-radius: 10px;
-      overflow: hidden;
-    }
-    .loader::after {
-      content: '';
-      width: 40%;
-      height: 100%;
-      background: #FF3D00;
-      position: absolute;
-      top: 0;
-      left: 0;
-      box-sizing: border-box;
-      animation: animloader 2s linear infinite;
-    }
-    
-    @keyframes animloader {
-      0% {
-        left: 0;
-        transform: translateX(-100%);
-      }
-      100% {
-        left: 100%;
-        transform: translateX(0%);
-      }
-    }
-    `,
-}, 
-{
-  id: "prog-plain-fill",
-  html: `<span class="loader"></span>`,
-  css: `.loader{
-    display: block;
-    position: relative;
-    height: 25px;
-    width: 200px;
-    background: #fff;
-    overflow: hidden;
-  }
-  .loader:after{
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 0;
-    background: #FF3D00;
-    animation: 6s prog ease-in infinite;
-  }
-  @keyframes prog {
-    to  {   width: 100%;}
-  }
-  `,
-}, 
-{
-  id: "prog-fill-text",
-  html: `<span class="loader"></span>`,
-  css: `.loader{
-    display: block;
-    position: relative;
-    height: 32px;
-    width: 200px;
-    background: #fff;
-    border:2px solid #fff;
-    color: red;
-    overflow: hidden;
-  }
-  .loader::before{
-    content: '';
-    background: red;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 0;
-    height: 100%;
-    animation: loading 10s linear infinite;
-  }
-  .loader:after{
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    font-size: 24px;
-    line-height: 32px;
-    color: rgb(0,255,255);
-    mix-blend-mode: difference;
-    animation: percentage 10s linear infinite;
-  }
-  
-  @keyframes loading {
-    0% { width: 0 }
-    100% { width: 100% }
-  }
-  @keyframes percentage {
-    0% { content: "0%"}
-    5% { content: "5%"}
-    10% { content: "10%"}
-    20% { content: "20%"}
-    30% { content: "30%"}
-    40% { content: "40%"}
-    50% { content: "50%"}
-    60% { content: "60%"}
-    70% { content: "70%"}
-    80% { content: "80%"}
-    90% { content: "90%"}
-    95% { content: "95%"}
-    96% { content: "96%"}
-    97% { content: "97%"}
-    98% { content: "98%"}
-    99% { content: "99%"}
-    100% { content: "100%"}
-  }
-  
-  `,
-},
-
-{
-  id: "pro-bx-ball-rp",
-  html: `<span class="loader"></span>`,
-  css: `.loader{
-    display: block;
-    position: relative;
-    height: 32px;
-    width: 140px;
-    border: 3px solid #fff;
-    border-radius: 20px;
-    box-sizing: border-box;
-  }
-  .loader:before{
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 26px;
-    height: 26px;
-    border-radius: 50%;
-    background: #FF3D00;
-    animation: ballbns 2s ease-in-out infinite alternate;
-  }
-  @keyframes ballbns {
-    0% {  left: 0; transform: translateX(0%); }
-    100% {  left: 100%; transform: translateX(-100%); }
-  }
-  `,
-},
-
-{
-  id: "pro-fir-ball",
-  html: `<span class="loader"></span>`,
-  css: `
-  .loader{
-    display: block;
-    position: relative;
-    height: 32px;
-    width: 150px;
-    box-sizing: border-box;
-    overflow: hidden;
-    border: 2px solid #FFF;
-    border-radius: 20px;
-  }
-  .loader:before{
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 2px;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    background: #FF3D00;
-    animation: ballbns 3s ease-in-out infinite;
-  }
-  
-  @keyframes ballbns {
-    0% {  
-        left: 0; 
-        transform: translateX(0%); 
-        box-shadow: 
-        -5px 0 0 -1px rgba(255, 61, 0, 0.9),
-        -10px 0 0 -2px rgba(255, 61, 0, 0.8),
-        -15px 0 0 -4px rgba(255, 61, 0, 0.6),
-        -20px 0 0 -6px rgba(255, 61, 0, 0.4),
-        -25px 0 0 -8px rgba(255, 61, 0, 0.2);
-    }
-    49% {  
-        left: 100%; 
-        transform: translateX(-100%); 
-        box-shadow: 
-        -5px 0 0 -1px rgba(255, 61, 0, 0.9),
-        -10px 0 0 -2px rgba(255, 61, 0, 0.8),
-        -15px 0 0 -4px rgba(255, 61, 0, 0.6),
-        -20px 0 0 -6px rgba(255, 61, 0, 0.4),
-        -25px 0 0 -8px rgba(255, 61, 0, 0.2);
-    }
-    51% {  
-        left: 100%; 
-        transform: translateX(-100%); 
-        box-shadow: 
-        5px 0 0 -1px rgba(255, 61, 0, 0.9),
-        10px 0 0 -2px rgba(255, 61, 0, 0.8),
-        15px 0 0 -4px rgba(255, 61, 0, 0.6),
-        20px 0 0 -6px rgba(255, 61, 0, 0.4),
-        25px 0 0 -8px rgba(255, 61, 0, 0.2);
-    }
-    100% {  
-        left: 0; 
-        transform: translateX(0%); 
-        box-shadow: 
-        5px 0 0 -1px rgba(255, 61, 0, 0.9),
-        10px 0 0 -2px rgba(255, 61, 0, 0.8),
-        15px 0 0 -4px rgba(255, 61, 0, 0.6),
-        20px 0 0 -6px rgba(255, 61, 0, 0.4),
-        25px 0 0 -8px rgba(255, 61, 0, 0.2);
-    }
-  }  
-  `,
-},
-
-{
-  id: "pro-ball-grb",
-  html: `<span class="loader"></span>`,
-  css: `.loader{
-    display: block;
-    position: relative;
-    height: 32px;
-    width: 140px;
-    border: 3px solid #fff;
-    border-radius: 20px;
-    box-sizing: border-box;
-    animation: balancing 2s linear infinite alternate;
-    transform-origin: center center;
-  }
-  .loader:before{
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 52px;
-    height: 26px;
-    border-radius: 20px;
-    background: #FF3D00;
-    animation: ballbns 2s linear infinite alternate;
-  }
-  @keyframes ballbns {
-    0% {  left: 0; transform: translateX(0%); }
-    100% {  left: 100%; transform: translateX(-100%); }
-  }
-  @keyframes balancing {
-    0% {  transform: rotate(-25deg); }
-    50% {  transform: rotate(0deg); }
-    100% {  transform: rotate(25deg); }
-  }
-  `,
-},
-{
-  id: "pro-bal-ln-rp",
-  html: `<span class="loader"></span>`,
-  css: `.loader{
-    display: block;
-    position: relative;
-    height: 32px;
-    width: 120px;
-    background: linear-gradient(#FFF 4px, transparent 0) no-repeat;
-    background-position: 0 16px;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-  .loader:before{
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 2px;
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    background: #FF3D00;
-    border:6px solid #FFF;
-    box-sizing: border-box;
-    animation: ballbns 1.5s linear infinite;
-  }
-  
-  @keyframes ballbns {
-    0% {  left: 0; transform: translateX(-100%); }
-    100% {  left: 100%; transform: translateX(0%); }
-  }
-  `,
-},
-{
-  id: "pro-dmnd-tgl",
-  html: `<span class="loader"></span>`,
-  css: `.loader{
-    display: block;
-    position: relative;
-    height: 32px;
-    width: 100px;
-    background: linear-gradient(#FFF 4px, transparent 0) no-repeat;
-    background-position: 0 14px;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-  .loader:before{
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 4px;
-    width: 24px;
-    height: 24px;
-    background: #FF3D00;
-    animation: ballbns 1s linear infinite alternate ;
-  }
-  
-  @keyframes ballbns {
-    0% {  left: 0; transform: translateX(0%) rotate(45deg); }
-    100% {  left: 100%; transform: translateX(-100%) rotate(45deg); }
-  }
-  `,
-},
-{
-  id: "pro-srl-rp",
-  html: `<span class="loader"></span>`,
-  css: `.loader{
-    display: block;
-    position: relative;
-    height: 32px;
-    border: 2px solid #fff;
-    width: 120px;
-    background: #fff;
-    box-sizing: border-box;
-  }
-  .loader:before{
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0px;
-    width: 28px;
-    height: 28px;
-    background: #FF3D00;
-    animation: ballbns 1s ease-in-out infinite alternate;
-  }
-  
-  @keyframes ballbns {
-    0% {  left: 0; transform: translateX(0%); }
-    100% {  left: 100%; transform: translateX(-100%); }
-  }
-  `,
-},
-  {
-    id: "toBlrSpn",
-    html: `<span class="loader"></span>`,
-    css: `.loader{
-  width: 200px;
-  height: 40px;
-  background-color: #0004;
-  position: relative;
-  border-radius: 50px;
-  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05);
-}
-.loader:after {
-  border-radius: 50px;
-  content: "";
-  position: absolute;
-  background-color: #fff;
-  left: 2px;
-  top: 2px;
-  bottom: 2px;
-  right: 360px;
-  animation: slide 2s linear infinite;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-@keyframes slide {
-  0% {
-    right: 150px;
-    left: 2px;
-  }
-  5% {
-    left: 2px;
-  }
-  50% {
-    right: 2px;
-    left: 150px;
-  }
-  55% {
-    right: 2px;
-  }
-  100% {
-    right: 150px;
-    left: 2px;
-  }
-}
-  `,
-},
-{
-    id: "toggleBallSlider2Xqr",
-    html: `<span class="loader"></span>`,
-    css: `.loader{
-      width: 100px;
-      height: 46px;
-      position: relative;
-      border-bottom: 5px solid #FFF;
-      border-top: 5px solid #FFF;
-      box-sizing: border-box;
-    }
-    .loader:before , .loader:after {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: -20px;
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background: #FF3D00;
-      border: 5px solid #FFF;
-      box-sizing: border-box;
-      animation: slide 1s infinite ease-in-out alternate;
-
-    }
-    .loader:after {
-      top: 20px;
-      animation-direction: alternate-reverse;
-    }
-    @keyframes slide {
-      0% , 20% {  transform: translateX(70px)  }
-      80% , 100% { transform: translateX(-1px) }
-    }
-  `,
-},
-
-
-
-
-{
-  id: "pro-fil-gp-sqr",
-  html: `<span class="loader"></span>`,
-  css: `.loader{
-    display: block;
-    position: relative;
-    height: 20px;
-    width: 140px;
-    background-image: 
-    linear-gradient(#FFF 20px, transparent 0), 
-    linear-gradient(#FFF 20px, transparent 0), 
-    linear-gradient(#FFF 20px, transparent 0), 
-    linear-gradient(#FFF 20px, transparent 0);
-    background-repeat: no-repeat;
-    background-size: 20px auto;
-    background-position: 0 0, 40px 0, 80px 0, 120px 0;
-    animation: pgfill 1s linear infinite;
-  }
-  
-  @keyframes pgfill {
-    0% {   background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
-    25% {   background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
-    50% {   background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
-    75% {   background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
-    100% {   background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0); }
-  }
-  `,
-},
-{
-  id: "pro-sqr-run",
-  html: `<span class="loader"></span>`,
-  css: `.loader{
-    display: block;
-    position: relative;
-    height: 20px;
-    width: 140px;
-    background-image: 
-    linear-gradient(#FFF 20px, transparent 0), 
-    linear-gradient(#FFF 20px, transparent 0), 
-    linear-gradient(#FFF 20px, transparent 0), 
-    linear-gradient(#FFF 20px, transparent 0);
-    background-repeat: no-repeat;
-    background-size: 20px auto;
-    background-position: 0 0, 40px 0, 80px 0, 120px 0;
-    animation: pgfill 1s linear infinite;
-  }
-  @keyframes pgfill {
-    0% {   background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
-    25% {   background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
-    50% {   background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
-    75% {   background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
-    100% {   background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0); }
-  }
-  `,
-},
-{
-  id: "pro-bb-ln-fl",
-  html: `<span class="loader"></span>`,
-  css: `.loader{
-    width:120px;
-    height:24px;
-    -webkit-mask:
-      radial-gradient(circle closest-side,#fff 94%,#0000) 0 0/25% 100%,
-      linear-gradient(#fff 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
-    mask:
-      radial-gradient(circle closest-side,#fff 94%,#0000) 0 0/25% 100%,
-      linear-gradient(#fff 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
-    background: linear-gradient(#FF3D00 0 0) left/0% 100% no-repeat #fff;
-    animation:bblprg 2s infinite linear;
-  }
-  @keyframes bblprg {
-      100% {background-size:100% 100%}
-  }
-  `,
-},
-    {
-        id: "6vqh50z2ump",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 96px;
-  height: 24px;
-  display: inline-block;
-  background-color: #FFF;
-  border: 1px solid #FFF;
-  border-radius: 4px;
-  background: linear-gradient(45deg, transparent 49%, #FFF 50%, #FFF 50%, transparent 51%, transparent), linear-gradient(-45deg, transparent 49%, #FFF 50%, #FFF 50%, transparent 51%, transparent);
-  font-size: 15px;
-  background-size: 1em 1em;
-  box-sizing: border-box;
-  animation: barStripe 0.6s linear infinite;
-}
-
-@keyframes barStripe {
-  0% {
-    background-position: 1em 0;
-  }
-  100% {
-    background-position: 0 0;
-  }
-}`,
-    }, {
-        id: "tly5d040gdj",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 130px;
-  height: 48px;
-  display: inline-block;
-  background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000 100%), linear-gradient(45deg, #000 25%, white 25%, white 75%, #000 75%, #000 100%);
-  font-size: 10px;
-  background-size: 32px 32px;
-  box-sizing: border-box;
-  animation: raceBoard 0.6s linear infinite;
-  background-position: 0 0, 16px 16px;
-}
-
-@keyframes raceBoard {
-  0% {
-    background-position: 0 0, 16px 16px;
-  }
-  100% {
-    background-position: 32px 0px, 48px 16px;
-  }
-}`,
-    }
-
-]
\ No newline at end of file
diff --git a/js/loaders/rect.js b/js/loaders/rect.js
deleted file mode 100644
index 579f677..0000000
--- a/js/loaders/rect.js
+++ /dev/null
@@ -1,1827 +0,0 @@
-export const RECT = [
-
-    
-{
-	id: "778qvxwuxps",
-  html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-}
-.loader::after,
-.loader::before {
-  content: '';
-  width: 48px;
-  height: 48px;
-  border: 2px solid #FFF;
-  position: absolute;
-  left: 0;
-  top: 0;
-  box-sizing: border-box;
-  animation: rotation 2s ease-in-out infinite;
-}
-.loader::after {
-  border-color: #FF3D00;
-  animation-delay: 1s;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-}, {
-	id: "5c6oxb7ativ",
-  html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  border: 4px solid #FFF;
-  position: absolute;
-  left: 0;
-  top: 0;
-  animation: animloader 2s ease-in-out infinite;
-}
-.loader::after {
-  border-color: #FF3D00;
-  animation-delay: 1s;
-}
-
-@keyframes animloader {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-    `,
-  }, {
-    id: "h7hdstj15pb",
-    html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  border: 2px solid #FFF;
-  position: absolute;
-  left: 0;
-  top: 0;
-  animation: rotation 2s ease-in-out infinite alternate;
-}
-.loader::after {
-  border-color: #FF3D00;
-  animation-direction: alternate-reverse;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-}, {
-	id: "9j8u5jers2t",
-  html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  border: 2px solid #FFF;
-  position: absolute;
-  left: 0;
-  top: 0;
-  animation: scaleOut 2s ease-in-out infinite;
-}
-.loader::after {
-  border-color: #FF3D00;
-  animation-delay: 1s;
-}
-
-@keyframes scaleOut {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}`,
-}, {
-	id: "qqooho5c05n",
-  html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  border: 2px solid #FFF;
-  position: absolute;
-  left: 0;
-  top: 0;
-  animation: rotationBreak 3s ease-in-out infinite alternate;
-}
-.loader::after {
-  border-color: #FF3D00;
-  animation-direction: alternate-reverse;
-}
-
-@keyframes rotationBreak {
-  0% {
-    transform: rotate(0);
-  }
-  25% {
-    transform: rotate(90deg);
-  }
-  50% {
-    transform: rotate(180deg);
-  }
-  75% {
-    transform: rotate(270deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-    `,
-  }, {
-    id: "jcffa36l7ol",
-    html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-  border: 2px solid #FFF;
-  box-sizing: border-box;
-  animation: rotation 2s linear infinite;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  border: 2px solid #FF3D00;
-  width: 38px;
-  height: 38px;
-  animation: rotationBack 1.5s linear infinite;
-  transform-origin: center center;
-}
-.loader::before {
-  width: 28px;
-  height: 28px;
-  border-color: #FFF;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
-@keyframes rotationBack {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(-360deg);
-  }
-}
-
-`,
-}, 
-  {
-    id: "dmndSkFill",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 64px;
-    height: 64px;
-    background-color: rgba(0, 0, 0, 0.5);
-    transform: rotate(45deg);
-    overflow: hidden;
-  }
-  .loader:after{
-    content: '';
-    position: absolute;
-    inset: 8px;
-    margin: auto;
-    background: #222b32;
-  }
-  .loader:before{
-    content: '';
-    position: absolute;
-    inset: -15px;
-    margin: auto;
-    background: #de3500;
-    animation: diamondLoader 2s linear infinite;
-  }
-  @keyframes diamondLoader {
-    0%  ,10% {
-      transform: translate(-64px , -64px) rotate(-45deg)
-    }
-    90% , 100% {
-      transform: translate(0px , 0px) rotate(-45deg)
-    }
-  }
-`,
-}, 
-
-{
-	id: "tcrxas6ttns",
-  html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-  background: #FFF;
-  box-sizing: border-box;
-  animation: flipX 1s linear infinite;
-}
-
-@keyframes flipX {
-  0% {
-    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
-  }
-  50% {
-    transform: perspective(200px) rotateX(-180deg) rotateY(0deg);
-  }
-  100% {
-    transform: perspective(200px) rotateX(-180deg) rotateY(-180deg);
-  }
-}
-    `,
-  }, {
-    id: "l3vyieqr44p",
-    html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-  color: #FFF;
-  border: 1px solid;
-  box-sizing: border-box;
-  animation: fill 2s linear infinite alternate;
-}
-
-@keyframes fill {
-  0% {
-    box-shadow: 0 0  inset;
-  }
-  100% {
-    box-shadow: 0 -48px inset;
-  }
-}
-    `,
-  }, {
-    id: "56x5ay7i99j",
-    html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-  background: #FFF;
-  box-sizing: border-box;
-  animation: zeroRotation 1s ease infinite alternate-reverse;
-}
-
-@keyframes zeroRotation {
-  0% {
-    transform: scale(1) rotate(0deg);
-  }
-  100% {
-    transform: scale(0) rotate(360deg);
-  }
-}
-    `,
-  },
-  {
-    id: "sqr-trf-crl",
-    html: `<span class="loader"></span>`,
-	  css: `.loader{
-    display: block;
-    position: relative;
-    height: 32px;
-    width: 100px;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-  .loader:before{
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 4px;
-    width: 24px;
-    height: 24px;
-    animation: ballbns 2s ease-in infinite;
-  }
-  
-  @keyframes ballbns {
-    0% {  
-      left: 0; 
-      transform: translateX(-100%) rotate(0deg);
-      border-radius: 0; 
-      background: #FFF;
-    }
-    100% {  
-      left: 100%; 
-      transform: translateX(0%) rotate(360deg); 
-      border-radius: 50%;
-      background: #FFF; 
-    }
-  } 
-  `,
-  },
-  {
-    id: "sqrRotTrfCrln",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 48px;
-  height: 48px;
-  background: #fff;
-  animation: rotate 1s linear infinite;
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg) scale(0.2);
-    border-radius: 10%;
-  }
-  50% {
-    transform: rotate(180deg) scale(1.5);
-    border-radius: 50%;
-  }
-  100% {
-    transform: rotate(360deg) scale(0.2);
-    border-radius: 10%;
-  }
-}
-  `,
-  },
-  
-  {
-    id: "dstrShfl-scrn",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  position: relative;
-}
-.loader:after {
-  content: '';
-  background: #FFF;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 32px;
-  height: 32px;
-  border-radius:4px;
-  transform-origin: -16px -32px;
-  animation: rotate 1s linear infinite;
-}
-@keyframes rotate {
-   0% , 100% {
-      transform: rotate(-45deg)  translate(-50% , -50%)
-    }
-   50% {
-      transform: rotate(-245deg)  translate(-50% , -50%)
-   }
-}
-  `,
-  },
-
-
-  
-  {
-    id: "gnyax6fzljk",
-    html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 24px;
-  height: 24px;
-  display: inline-block;
-  position: relative;
-  background: #FFF;
-  box-sizing: border-box;
-  animation: animloader 2s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    transform: translate(0, 0) rotateX(0) rotateY(0);
-  }
-  25% {
-    transform: translate(100%, 0) rotateX(0) rotateY(180deg);
-  }
-  50% {
-    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
-  }
-  75% {
-    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
-  }
-  100% {
-    transform: translate(0, 0) rotateX(0) rotateY(360deg);
-  }
-}
-    `,
-  }, {
-    id: "5i0njgizuv4",
-    html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background: #FFF;
-  color: #FFF;
-  animation: animloader 2s linear infinite alternate;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 0 0, 0 0, 0 0;
-  }
-  33% {
-    box-shadow: 24px 0px, 24px 0px, 24px 0px;
-  }
-  66% {
-    box-shadow: 24px 24px, 24px 24px, 24px 0px;
-  }
-  100% {
-    box-shadow: 0px 24px, 24px 24px, 24px 0px;
-  }
-}
-    `,
-  }, {
-    id: "bcwq451ytzu",
-    html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-}
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  left: 0;
-  top: -24px;
-  animation: animloader1 2s linear infinite alternate;
-}
-.loader::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 24px;
-  height: 24px;
-  background: rgba(255, 255, 255, 0.85);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-  box-sizing: border-box;
-  animation: animloader2 2s linear infinite alternate;
-}
-
-@keyframes animloader1 {
-  0%, 32% {
-    box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
-  }
-  33%, 65% {
-    box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
-  }
-  66%, 99% {
-    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
-  }
-  100% {
-    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
-  }
-}
-
-@keyframes animloader2 {
-  0% {
-    transform: translate(0, 0) rotateX(0) rotateY(0);
-  }
-  33% {
-    transform: translate(100%, 0) rotateX(0) rotateY(180deg);
-  }
-  66% {
-    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
-  }
-  100% {
-    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
-  }
-}
-    `,
-  },
-
-
-  {
-    id: "nyvy2vxxdig",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 48px;
-  height: 48px;
-  display: inline-block;
-  position: relative;
-  transform: rotate(45deg);
-}
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  left: 0;
-  top: -24px;
-  animation: animloader 4s ease infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 24px;
-  height: 24px;
-  background: rgba(255, 255, 255, 0.85);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-  animation: animloader2 2s ease infinite;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
-  }
-  12% {
-    box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
-  }
-  25% {
-    box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
-  }
-  37% {
-    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
-  }
-  50% {
-    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
-  }
-  62% {
-    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px white, 24px 48px white, 0px 48px white;
-  }
-  75% {
-    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px white, 0px 48px white;
-  }
-  87% {
-    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px white;
-  }
-  100% {
-    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
-  }
-}
-
-@keyframes animloader2 {
-  0% {
-    transform: translate(0, 0) rotateX(0) rotateY(0);
-  }
-  25% {
-    transform: translate(100%, 0) rotateX(0) rotateY(180deg);
-  }
-  50% {
-    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
-  }
-  75% {
-    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
-  }
-  100% {
-    transform: translate(0, 0) rotateX(0) rotateY(360deg);
-  }
-}
-    `,
-  },
-
-  {
-    id: "pir-fnd-flw",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        border: 24px solid #fff;
-        border-color: #FF3D00 #fff  #fff #fff;
-        animation : rotate 2s steps(4) infinite;
-      }
-      @keyframes rotate {
-        100% { transform: rotate(360deg); }
-      }
-      `
-  },
-  {
-    id: "sqr4xmlt2clrRotSpn",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        width: 64px;
-        height: 64px;
-        position: relative;
-        background-image:
-          linear-gradient(#FFF 16px, transparent 0) ,
-          linear-gradient(#FF3D00 16px, transparent 0) ,
-          linear-gradient(#FF3D00 16px, transparent 0) ,
-          linear-gradient(#FFF 16px, transparent 0);
-        background-repeat: no-repeat;
-        background-size: 16px 16px;
-        background-position: left top , left bottom , right top , right bottom;
-        animation: rotate 1s linear infinite;
-      }
-      @keyframes rotate {
-        0% {
-          width: 64px;
-          height: 64px;
-          transform: rotate(0deg)
-        }
-        50% {
-          width: 30px;
-          height: 30px;
-          transform: rotate(180deg)
-        }
-        100% {
-          width: 64px;
-          height: 64px;
-          transform: rotate(360deg)
-        }
-      }
-    `,
-  },
-  {
-    id: "sqr$PuncUp",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    animation: rotate 1s infinite;
-    height: 50px;
-    width: 50px;
-  }
-  .loader:before,
-  .loader:after {
-    content: "";
-    display: block;
-    height: 20px;
-    width: 20px;
-  }
-  .loader:before {
-    animation: box1 1s infinite;
-    background-color: #fff;
-    box-shadow: 30px 0 0 #ff3d00;
-    margin-bottom: 10px;
-  }
-  .loader:after {
-    animation: box2 1s infinite;
-    background-color: #ff3d00;
-    box-shadow: 30px 0 0 #fff;
-  }
-
-  @keyframes rotate {
-    0% { transform: rotate(0deg) scale(0.8) }
-    50% { transform: rotate(360deg) scale(1.2) }
-    100% { transform: rotate(720deg) scale(0.8) }
-  }
-
-  @keyframes box1 {
-    0% {
-      box-shadow: 30px 0 0 #ff3d00;
-    }
-    50% {
-      box-shadow: 0 0 0 #ff3d00;
-      margin-bottom: 0;
-      transform: translate(15px, 15px);
-    }
-    100% {
-      box-shadow: 30px 0 0 #ff3d00;
-      margin-bottom: 10px;
-    }
-  }
-
-  @keyframes box2 {
-    0% {
-      box-shadow: 30px 0 0 #fff;
-    }
-    50% {
-      box-shadow: 0 0 0 #fff;
-      margin-top: -20px;
-      transform: translate(15px, 15px);
-    }
-    100% {
-      box-shadow: 30px 0 0 #fff;
-      margin-top: 0;
-    }
-  }
-    `,
-  },
-
-
-
-
-  {
-    id: "sqrFlwupShdw67",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        height: 5px;
-        width: 5px;
-        color: #fff;
-        box-shadow: -10px -10px 0 5px,
-                    -10px -10px 0 5px,
-                    -10px -10px 0 5px,
-                    -10px -10px 0 5px;
-        animation: loader-38 6s infinite;
-      }
-
-      @keyframes loader-38 {
-        0% {
-          box-shadow: -10px -10px 0 5px,
-                      -10px -10px 0 5px,
-                      -10px -10px 0 5px,
-                      -10px -10px 0 5px;
-        }
-        8.33% {
-          box-shadow: -10px -10px 0 5px,
-                      10px -10px 0 5px,
-                      10px -10px 0 5px,
-                      10px -10px 0 5px;
-        }
-        16.66% {
-          box-shadow: -10px -10px 0 5px,
-                      10px -10px 0 5px,
-                      10px 10px 0 5px,
-                      10px 10px 0 5px;
-        }
-        24.99% {
-          box-shadow: -10px -10px 0 5px,
-                      10px -10px 0 5px,
-                      10px 10px 0 5px,
-                      -10px 10px 0 5px;
-        }
-        33.32% {
-          box-shadow: -10px -10px 0 5px,
-                      10px -10px 0 5px,
-                      10px 10px 0 5px,
-                      -10px -10px 0 5px;
-        }
-        41.65% {
-          box-shadow: 10px -10px 0 5px,
-                      10px -10px 0 5px,
-                      10px 10px 0 5px,
-                      10px -10px 0 5px;
-        }
-        49.98% {
-          box-shadow: 10px 10px 0 5px,
-                    10px 10px 0 5px,
-                    10px 10px 0 5px,
-                    10px 10px 0 5px;
-        }
-        58.31% {
-          box-shadow: -10px 10px 0 5px,
-                      -10px 10px 0 5px,
-                      10px 10px 0 5px,
-                      -10px 10px 0 5px;
-        }
-        66.64% {
-          box-shadow: -10px -10px 0 5px,
-                      -10px -10px 0 5px,
-                      10px 10px 0 5px,
-                      -10px 10px 0 5px;
-        }
-        74.97% {
-          box-shadow: -10px -10px 0 5px,
-                      10px -10px 0 5px,
-                      10px 10px 0 5px,
-                      -10px 10px 0 5px;
-        }
-        83.3% {
-          box-shadow: -10px -10px 0 5px,
-                      10px 10px 0 5px,
-                      10px 10px 0 5px,
-                      -10px 10px 0 5px;
-        }
-        91.63% {
-          box-shadow: -10px -10px 0 5px,
-                      -10px 10px 0 5px,
-                      -10px 10px 0 5px,
-                      -10px 10px 0 5px;
-        }
-        100% {
-          box-shadow: -10px -10px 0 5px,
-                      -10px -10px 0 5px,
-                      -10px -10px 0 5px,
-                      -10px -10px 0 5px;
-        }
-      }
-
-    `,
-  },
-
-
-  
-  {
-    id: "rspltt-rects",
-    html: `<span class="loader"></span>`,
-	css: `.loader {
-        width: 48px;
-        height: 48px;
-      }
-      .loader:before,
-      .loader:after {
-        content:"";
-        display: block;
-        height: 24px;
-        background:#fff;
-        animation: mvx 0.3s infinite ease-in alternate;
-      }
-      .loader:before {
-        animation-name:mvrx;
-      }
-      @keyframes mvx {
-        100% {transform: translateY(50%)}
-      }
-      @keyframes mvrx {
-        100% {transform: translateY(-50%)}
-      }
-
-    `,
-  },
-
-  
-  {
-    id: "rot-addig",
-    html: `<span class="loader"></span>`,
-	css: `.loader {
-        width: 48px;
-        height: 48px;
-        display: flex;
-        transform-origin:50% 125%;
-        animation: mov-y 1s infinite linear;
-      }
-      .loader:before,
-      .loader:after {
-        content:"";
-        flex:1;
-        background:#fff;
-        transform-origin: 0% 100%;
-        animation: rtr-x 1s infinite linear;
-      }
-      .loader:before {
-        transform-origin: 100% 100%;
-        animation-name: rtr-rx;
-      }
-
-      @keyframes mov-y {
-        0%,25%   {transform:translateY(0)     scaleY(1)}
-        49%   {transform:translateY(-75%)  scaleY(1)}
-        50%      {transform:translateY(-75%)  scaleY(-1)}
-        75%,100% {transform:translateY(-150%) scaleY(-1)}
-      }
-      @keyframes rtr-x {
-        25%,75% {transform: rotate(0deg)}
-        50%     {transform: rotate(90deg)}
-      }
-      @keyframes rtr-rx {
-        25%,75% {transform: rotate(0deg)}
-        50%     {transform: rotate(-90deg)}
-      }
-    `,
-  },
-  
-  {
-    id: "rtbr-clr",
-    html: `<span class="loader"></span>`,
-	css: `.loader {
-      width: 48px;
-      height: 48px;
-      display: flex;
-      animation: rotate 1.5s infinite linear;
-    }
-    .loader:before,
-    .loader:after {
-      content:"";
-      flex:1;
-      background:#fff;
-      animation: mvx 0.5s infinite linear alternate;
-    }
-    .loader:before {
-      background: #FF3D00;
-      animation-name:mvrx;
-    }
-
-    @keyframes rotate {
-      100% {transform: rotate(360deg)}
-    }
-    @keyframes mvx {
-      0% {transform: translateX(-15px)}
-      100% {transform: translateX(15px)}
-    }
-    @keyframes mvrx {
-      0% {transform: translateX(15px)}
-      100% {transform: translateX(-15px)}
-    }
-    `,
-  },
-  
-  {
-    id: "brix-shake-clr",
-    html: `<span class="loader"></span>`,
-	css: `.loader {
-          width: 48px;
-          height: 48px;
-          display: flex;
-          animation : rotate 2s linear infinite;
-        }
-        .loader:before,
-        .loader:after {
-          content:"";
-          flex:1;
-          background:#fff;
-          animation: mvx 0.5s infinite linear alternate;
-        }
-        .loader:before {
-          background: #FF3D00;
-          animation-name:mvrx;
-        }
-
-        @keyframes rotate {
-          100% {transform: rotate(360deg)}
-        }
-        @keyframes mvx {
-          0% , 40% {transform: translateX(0px)}
-          20% , 60% {transform: translateX(8px)}
-          100% {transform: translateX(15px)}
-        }
-        @keyframes mvrx {
-          0% , 40% {transform: translateX(0px)}
-          20% , 60% {transform: translateX(-8px)}
-          100% {transform: translateX(-15px)}
-        }
-
-    `,
-  },
-
-
-  {
-    id: "stackLyrXp",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width:  48px;
-    height: 48px;
-    background: #de3500;
-    transform: rotateX(65deg) rotate(45deg);
-    // remove bellows command for perspective change
-    //transform: perspective(200px) rotateX(65deg) rotate(45deg); 
-    color: #fff;
-    animation: layers1 1s linear infinite alternate;
-  }
-  .loader:after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: rgba(255, 255, 255, 0.7);
-    animation: layerTr 1s linear infinite alternate;
-  }
-
-  @keyframes layers1 {
-    0% { box-shadow: 0px 0px 0 0px  }
-   90% , 100% { box-shadow: 20px 20px 0 -4px  }
-  }
-  @keyframes layerTr {
-    0% { transform:  translate(0, 0) scale(1) }
-    100% {  transform: translate(-25px, -25px) scale(1) }
-  }
-      `,
-  },
-  {
-    id: "sqrBxRol",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  background: #de3500;
-  width: 48px;
-  height: 48px;
-  position: relative;
-  text-align: center;
-  animation: 3s rotate linear infinite;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background: #FFFF;
-  animation: 1.5s rotate reverse linear infinite ;
-
-}
-@keyframes rotate {
-  0%{    transform: rotate(0deg)}
-  100%{    transform: rotate(360deg)}
-}
-      `,
-  },
-
-  {
-    id: "prima-split-rects",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 164px;
-    height: 164px;
-  }
-  .loader::before , .loader::after {
-    content: '';
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    background-color: #fff;
-    left: 50%;
-    top: 50%;
-    animation: rotate 1s ease-in infinite;
-}
-.loader::after {
-  width: 20px;
-  height: 20px;
-  background-color: #FF3D00;
-  animation: rotate 1s ease-in infinite, moveY 1s ease-in infinite ;
-}
-
-@keyframes moveY {
-  0% , 100% {top: 10%}
-  45% , 55% {top: 59%}
-  60% {top: 40%}
-}
-@keyframes rotate {
-  0% { transform: translate(-50%, -100%) rotate(0deg) scale(1 , 1)}
-  25%{ transform: translate(-50%, 0%) rotate(180deg) scale(1 , 1)}
-  45% , 55%{ transform: translate(-50%, 100%) rotate(180deg) scale(3 , 0.5)}
-  60%{ transform: translate(-50%, 100%) rotate(180deg) scale(1, 1)}
-  75%{ transform: translate(-50%, 0%) rotate(270deg) scale(1 , 1)}
-  100%{ transform: translate(-50%, -100%) rotate(360deg) scale(1 , 1)}
-}
-    `,
-  },
-
-
-
-
-  {
-    id: "prima-split-rects",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        width: 48px;
-        height: 48px;
-        position: relative;
-      }
-      .loader:before,
-      .loader:after {
-        content:"";
-        display: block;
-        border: 24px solid transparent;
-        border-color: transparent transparent #fff  #fff;
-        position: absolute;
-        left: 0;
-        top: 0;
-        animation: mvx 1s infinite ease-in;
-      }
-      .loader:before {
-        left: -1px;
-        top: 1px;
-        border-color:#fff  #fff transparent transparent;
-        animation-name:mvrx;
-      }
-      @keyframes mvx {
-        0% , 25% {transform: translate(0 , 0) rotate(0deg)}
-        50% {transform: translate(-50% , 50%) rotate(180deg)}
-        100% {transform: translate(0% , 0%) rotate(180deg)}
-      }
-      @keyframes mvrx {
-        0% , 25%  {transform: translate(0 , 0) rotate(0deg)}
-        50% {transform: translate(50% , -50%) rotate(180deg)}
-        100% {transform: translate(0% , 0%) rotate(180deg)}
-      }
-    `,
-  },
-
-
-  {
-    id: "prm-slice-rts",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-          width: 47px;
-          height: 47px;
-          position: relative;
-        }
-        .loader:before,
-        .loader:after {
-          content:"";
-          display: block;
-          border: 24px solid;
-          border-color: transparent transparent #fff  #fff;
-          position: absolute;
-          left: 0;
-          top: 0;
-          animation: mvx 1.2s infinite ease-in;
-        }
-        .loader:before {
-          border-color:#fff  #fff transparent transparent;
-          animation-name:mvrx;
-        }
-        @keyframes mvx {
-          0% , 10%  {transform: translate(0 , 0) rotate(0deg)}
-          30% {transform: translate(-50% , -50%) rotate(0deg)}
-          50% {transform: translate(-50% , -50%) rotate(180deg)}
-          75% , 100% {transform: translate(0, 0) rotate(180deg)}
-        }
-        @keyframes mvrx {
-          0% , 10%  {transform: translate(0 , 0) rotate(0deg)}
-          30% {transform: translate(50% , 50%) rotate(0deg)}
-          50% {transform: translate(50% , 50%) rotate(180deg)}
-          75% , 100% {transform: translate(0, 0) rotate(180deg)}
-        }
-    `,
-  },
-
-
-  {
-    id: "prm-pus-pop-rts",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        position: relative;
-        border: 24px solid;
-        border-color: #fff  transparent #fff transparent;
-        animation : rotate 2s linear infinite;
-      }
-      .loader:before,
-      .loader:after {
-        content:"";
-        display: block;
-        border: 24px solid transparent;
-        border-left-color: #fff;
-        position: absolute;
-        left: -24px;
-        top: -24px;
-        animation: mvx 1s infinite linear;
-      }
-      .loader:before {
-        border-color: transparent #fff transparent transparent;
-        animation-name:mvrx;
-        animation-delay: 0.5s;
-      }
-      @keyframes rotate {
-        100% {transform: rotate(360deg)}
-      }
-      @keyframes mvx {
-        20% , 80% {transform: translateX(0)}
-        50% {transform: translateX(-50%)}
-      }
-      @keyframes mvrx {
-        20% , 80% {transform: translateX(0)}
-        50% {transform: translateX(50%)}
-      }
-    `,
-  },
-
-  {
-    id: "prm-kti-pori-rts",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-        position: relative;
-        border: 24px solid;
-        border-color: #fff  transparent #fff transparent;
-        animation : rotate 2s linear infinite;
-      }
-      .loader:before,
-      .loader:after {
-        content:"";
-        display: block;
-        border: 24px solid transparent;
-        border-left-color: #fff;
-        position: absolute;
-        left: -24px;
-        top: -24px;
-        animation: prix 1s infinite ease-in;
-        transform-origin: 0% 100%;
-      }
-      .loader:before {
-        border-color: transparent #fff transparent transparent;
-        transform-origin: 100% 0%;
-        animation-delay: 0.5s;
-      }
-      @keyframes rotate {
-        100% {transform: rotate(360deg)}
-      }
-      @keyframes prix {
-        20% , 80% {transform: rotate(0)}
-        50% {transform: rotate(-90deg)}
-      }
-    `,
-  },
-  {
-    id: "prm-splt-clr-rots",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-            width: 48px;
-            height: 48px;
-            position: relative;
-            animation : rotate 4s linear infinite;
-          }
-          .loader:before,
-          .loader:after {
-            content:"";
-            display: block;
-            border: 24px solid;
-            border-color: transparent transparent #fff  #fff;
-            position: absolute;
-            left: 0;
-            top: 0;
-            animation: mvx 1s infinite ease-in;
-          }
-          .loader:before {
-            left: -1px;
-            top: 1px;
-            border-color:#FF3D00  #FF3D00 transparent transparent;
-            animation-name:mvrx;
-          }
-
-          @keyframes rotate {
-            100% {transform: rotate(360deg)}
-          }
-          @keyframes mvx {
-            0% , 15% {transform: translate(0 , 0) rotate(0deg)}
-            50% {transform: translate(-50% , 50%) rotate(180deg)}
-            100% {transform: translate(0% , 0%) rotate(180deg)}
-          }
-          @keyframes mvrx {
-            0% , 15%  {transform: translate(0 , 0) rotate(0deg)}
-            50% {transform: translate(50% , -50%) rotate(180deg)}
-            100% {transform: translate(0% , 0%) rotate(180deg)}
-          }
-    `,
-  },
-
-
-  {
-    id: "pir-weld-flw",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-          position: relative;
-          width: 48px;
-          height: 48px;
-        }
-        .loader:before,
-        .loader:after {
-          content:"";
-          display: block;
-          border: 32px solid transparent;
-          border-top-color: #fff;
-          position: absolute;
-          left: 0;
-          top: 0;
-          animation: weld-rotate 2s infinite ease-in;
-        }
-        .loader:before {
-          border-color: transparent  transparent transparent #FF3D00;
-          animation-delay: 0.5s;
-        }
-        @keyframes weld-rotate {
-          0% , 25% {transform: rotate(0deg)}
-          50% , 75% {transform: rotate(180deg)}
-          100% {transform: rotate(360deg)}
-        }
-      `
-  },
-  {
-    id: "pir-wottippu-flw",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-          position: relative;
-          width: 48px;
-          height: 48px;
-        }
-        .loader:before,
-        .loader:after {
-          content:"";
-          display: block;
-          border: 32px solid transparent;
-          border-top-color: #fff;
-          position: absolute;
-          left: 0;
-          top: 0;
-          animation: weld-rotate 2s infinite ease-in;
-        }
-        .loader:before {
-          border-color: transparent  transparent transparent #FF3D00;
-          animation-delay: 0.5s;
-            animation-direction: reverse;
-        }
-        @keyframes weld-rotate {
-          0% , 25% {transform: rotate(0deg)}
-          50% , 75% {transform: rotate(180deg)}
-          100% {transform: rotate(360deg)}
-        }
-      `
-  },
-  {
-    id: "brik-splt-mv",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-          position: relative;
-          width: 48px;
-          height: 48px;
-        }
-        .loader:before{
-            content: "";
-            border-left: 24px solid #fff;
-            border-right: 24px solid #fff;
-            position: absolute;
-            height: 24px;
-            width: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            top: 0px;
-            animation: splitX 1s  linear infinite alternate;
-        }
-        .loader:after{
-          content: '';
-          width: 48px;
-          height: 24px;
-          background: #fff;
-          position: absolute;
-          left: 0;
-          bottom:0;
-          animation:moveY 1s linear infinite alternate;
-        }
-        @keyframes splitX {
-          0% {width: 0; transform: translate(-50% , 0)}
-          33% {width: 100%; transform: translate(-50% , 0)}
-          66% {width: 100%; transform: translate(-50% , 24px)}
-          100% {width: 0; transform: translate(-50% , 24px)}
-        }
-
-        @keyframes moveY {
-          0% , 33% {transform: translateY(0)}
-          66% , 100% {transform: translateY(-24px)}
-        }
-    `,
-  },
-
-  {
-    id: "spinFloatSqr",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-          width: 48px;
-          height: 48px;
-          margin: auto;
-          position: relative;
-        }
-        .loader:before {
-            content: '';
-            width: 48px;
-            height: 5px;
-            background: #000;
-            opacity: 0.25;
-            position: absolute;
-            top: 60px;
-            left: 0;
-            border-radius: 50%;
-            animation: shadow 0.5s linear infinite;
-          }
-          .loader:after {
-            content: '';
-            width: 100%;
-            height: 100%;
-            background: #fff;
-            animation: bxSpin 0.5s linear infinite;
-            position: absolute;
-            top: 0;
-            left: 0;
-            border-radius: 4px;
-          }
-        @keyframes bxSpin {
-          17% {
-            border-bottom-right-radius: 3px;
-          }
-          25% {
-            transform: translateY(9px) rotate(22.5deg);
-          }
-          50% {
-            transform: translateY(18px) scale(1, .9) rotate(45deg);
-            border-bottom-right-radius: 40px;
-          }
-          75% {
-            transform: translateY(9px) rotate(67.5deg);
-          }
-          100% {
-            transform: translateY(0) rotate(90deg);
-          }
-        }
-
-        @keyframes shadow {
-          0%, 100% {
-            transform: scale(1, 1);
-          }
-          50% {
-            transform: scale(1.2, 1);
-          }
-        }
-      `
-  },
-  {
-    id: "sqrWalkBrk2x",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 48px;
-    height: 48px;
-    background: #fff;
-    border-radius: 50%;
-    animation:ellipseAnimation 2s linear infinite;
-  }
-
-  @keyframes ellipseAnimation {
-    0% {
-      border-radius: 50%;
-    }
-
-    12.5% {
-      border-radius: 0 50% 50% 50%;
-      transform: rotate(45deg);
-    }
-
-    25% {
-      border-radius: 0 0 50% 50%;
-      transform: rotate(90deg);
-    }
-
-    37.5% {
-      border-radius: 0 0 0 50%;
-      transform: rotate(135deg);
-    }
-
-    50% {
-      border-radius: 0;
-      transform: rotate(180deg);
-    }
-
-    62.5% {
-      border-radius: 50% 0 0 0;
-      transform: rotate(225deg);
-    }
-
-    75% {
-      border-radius: 50% 50% 0 0;
-      transform: rotate(270deg);
-    }
-
-    87.5% {
-       border-radius: 50% 50% 50% 0;
-      transform: rotate(315deg);
-    }
-
-    100% {
-       border-radius: 50%;
-      transform: rotate(360deg);
-    }
-  }
-      `
-  },
-
-  {
-    id: "sqrWalkBrk2x",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width: 62px;
-    height: 62px;
-    background: linear-gradient(to right, #FFF 20%, #0000 21%);
-    background-repeat: repeat-x;
-    background-size: 36px 8px;
-    background-position: 9px bottom;
-    animation: moveX 0.5s linear infinite;
-  }
-  .loader::before  {
-    content: '';
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    border-radius: 2px;
-    background-color: #fff;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50% , -50% );
-    animation: rotate 0.5s linear infinite;
-}
-
-@keyframes moveX {
-  0%, 25%{    background-position: 10px bottom }
-  75% , 100% {background-position: -30px bottom;}
-}
-@keyframes rotate {
-  0%, 25% { transform:translate(-50% , -50% ) rotate(0deg)}
-  75%,  100% { transform:translate(-55% , -55% ) rotate(90deg)}
-}
-  `
-  },
-
-  {
-    id: "sqr-bblBounceFlp",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 50px;
-  height: 165px;
-  position: relative;
-}
-.loader::before {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 0;
-  transform: translate(-50% , 0);
-  width: 16px;
-  height: 16px;
-  background: #FF3D00;
-  border-radius: 50%;
-  animation: bounce 2s linear infinite;
-}
-.loader::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  height: 48px;
-  width: 48px;
-  background: #fff;
-  border-radius: 4px;
-  animation: rotate 2s linear infinite;
-}
-
-@keyframes bounce {
-  0% , 50% , 100%{
-    transform: translate(-50%, 0px);
-    height: 20px;
-  }
-  20% {
-    transform: translate(-25%, 85px);
-    height: 28px;
-  }
-  25% {
-    transform: translate(-25%, 110px);
-    height: 12px;
-  }
-  70% {
-    transform: translate(-75%, 85px);
-    height: 28px;
-  }
-  75% {
-    transform: translate(-75%, 108px);
-    height: 12px;
-  }
-}
-@keyframes rotate {
-  0% , 50% , 100%{ transform: rotate(0deg)}
-  25% { transform: rotate(90deg)}
-  75%{ transform: rotate(-90deg)}
-}
-  `
-  },
-  
-  {
-    id: "sqr-bbl-flpFlw",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 56px;
-  height: 56px;
-  position: relative;
-  background: #fff;
-  border-radius: 4px;
-  perspective: 500px;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  width: 24px;
-  height: 24px;
-  background: #FF3D00;
-  border-radius: 50%;
-  transform-origin: 100% 100%;
-  animation: flip 2s linear infinite;
-}
-@keyframes flip {
-    0% , 100%{ transform: rotateX(0deg) rotateY(0deg)}
-    25%{ transform: rotateX(0deg) rotateY(-180deg)}
-    50%{ transform: rotateX(-180deg) rotateY(-180deg)}
-    75%{ transform: rotateX(-180deg) rotateY(0deg)}
-}
-  `
-  },
-  
-    {
-      id: "cubBblflowwt",
-      html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 54px;
-  height: 54px;
-  position: relative;
-  background: #fff;
-  border-radius: 4px;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  left: 3px;
-  top: 3px;
-  width: 24px;
-  height: 24px;
-  background: #FF3D00;
-  border-radius: 50%;
-  transform-origin: 100% 100%;
-  animation: move 1s linear infinite;
-}
-@keyframes move {
-    0% , 100%{ transform: translate(0 ,0)}
-    25%{ transform: translate(100% ,0)}
-    50%{ transform: translate(100% ,100%)}
-    75%{ transform: translate(0 ,100%)}
-}
-      `
-  },
-
-  {
-    id: "cubeRotDial",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 54px;
-  height: 54px;
-  position: relative;
-  border-radius: 4px;
-  background-color: #fff;
-  background-image:
-    radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
-    radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
-    radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
-    radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
-    radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
-    radial-gradient(circle 5px , #FF3D00 100%, transparent 0);
-    background-repeat: no-repeat;
-  animation: move 4s linear infinite , rotate 2s linear infinite;
-}
-
-@keyframes rotate {
-  0% , 20%{ transform: rotate(0deg)}
-  30% , 40% { transform: rotate(90deg)}
-  50% , 60% { transform: rotate(180deg)}
-  70% , 80% { transform: rotate(270deg)}
-  90%,  100% { transform: rotate(360deg)}
-}
-@keyframes move {
-  0% ,  9%{
-      background-position:
-      -12px -15px,  -12px 0px, -12px 15px,
-      12px -15px,  12px 0px,  12px 15px;
-  }
-  10% , 25%{
-      background-position:
-      0px -15px,  -12px 0px, -12px 15px,
-      34px -15px,  12px 0px,  12px 15px;
-  }
-  30% , 45%{
-      background-position:
-      0px -34px, -12px -10px, -12px 12px,
-      34px -15px, 12px -10px, 12px 12px;
-  }
-  50% , 65% {
-      background-position:
-      0px -34px, -12px -34px, -12px 12px,
-      34px -12px, 0px -10px, 12px 12px;
-  }
-  70% , 85% {
-      background-position:
-      0px -34px, -12px -34px, 0px 12px,
-      34px -12px, 0px -10px, 34px 12px;
-  }
- 90% , 100% {
-      background-position:
-      0px -34px, -12px -34px, 0px 0px,
-      34px -12px, 0px 0px, 34px 12px;
-  }
-}
-  `
-  },
-
-  {
-    id: "gsupn3q1npb",
-    html: `<span class="loader"></span>`,
-	css: `.loader {
-  width: 16px;
-  height: 16px;
-  box-shadow: 0 30px, 0 -30px;
-  border-radius: 4px;
-  background: currentColor;
-  display: block;
-  margin: -50px auto 0;
-  position: relative;
-  color: #FFF;
-  transform: translateY(30px);
-  box-sizing: border-box;
-  animation: animloader 2s ease infinite;
-}
-.loader::after,
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  width: 16px;
-  height: 16px;
-  box-shadow: 0 30px, 0 -30px;
-  border-radius: 4px;
-  background: currentColor;
-  color: #FFF;
-  position: absolute;
-  left: 30px;
-  top: 0;
-  animation: animloader 2s 0.2s ease infinite;
-}
-.loader::before {
-  animation-delay: 0.4s;
-  left: 60px;
-}
-
-@keyframes animloader {
-  0% {
-    top: 0;
-    color: white;
-  }
-  50% {
-    top: 30px;
-    color: rgba(255, 255, 255, 0.2);
-  }
-  100% {
-    top: 0;
-    color: white;
-  }
-}
-    `,
-  }
-]
\ No newline at end of file
diff --git a/js/loaders/skeleton.js b/js/loaders/skeleton.js
deleted file mode 100644
index 37b3d25..0000000
--- a/js/loaders/skeleton.js
+++ /dev/null
@@ -1,291 +0,0 @@
-export const SKELETON = [
-    {
-        id: "1k4fd7cixrr",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 360px;
-  height: 100px;
-  display: block;
-  background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), radial-gradient(circle 50px at 50px 50px, #FFF 99%, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0);
-  background-repeat: no-repeat;
-  background-size: 75px 100px, 100px 100px, 125px 20px, 260px 20px, 260px 20px;
-  background-position: -50% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
-  }
-  100% {
-    background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
-  }
-}
-`,
-    }, {
-        id: "qaml5b4yau",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 360px;
-  height: 100px;
-  display: block;
-  background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), linear-gradient(#FFF 100px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0);
-  background-repeat: no-repeat;
-  background-size: 75px 100px, 100px 100px, 125px 20px, 260px 20px, 260px 20px;
-  background-position: -50% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
-  }
-  100% {
-    background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
-  }
-}
-`,
-    }, {
-        id: "mfws6k6awb",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 360px;
-  height: 100px;
-  display: block;
-  position: relative;
-  background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0);
-  background-repeat: no-repeat;
-  background-size: 75px 100px,  125px 20px, 260px 20px, 260px 20px;
-  background-position: 0% 0, 120px 0, 120px 40px, 120px 80px;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  width: 100px;
-  height: 100px;
-  border-radius: 8px;
-  background: #FFF;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-@keyframes animloader {
-  0% {
-    background-position: 0% 0, 120px 0, 120px 40px, 120px 80px;
-  }
-  100% {
-    background-position: 100% 0, 120px 0, 120px 40px, 120px 80px;
-  }
-}
-`,
-    }, {
-        id: "r9ql0hh65i",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 320px;
-  height: 150px;
-  margin: auto;
-  display: block;
-  position: relative;
-  background: #FFF;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: '';  
-  width: calc(100% - 30px);
-  height: calc(100% - 30px);
-  top: 15px;
-  left: 15px;
-  position: absolute;
-  background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%), linear-gradient(#DDD 56px, transparent 0), linear-gradient(#DDD 24px, transparent 0), linear-gradient(#DDD 18px, transparent 0), linear-gradient(#DDD 66px, transparent 0);
-  background-repeat: no-repeat;
-  background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px;
-  background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
-  }
-  100% {
-    background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
-  }
-}
-`,
-    }, {
-        id: "clfvm3ka8b8",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 320px;
-  height: 150px;
-  display: block;
-  margin: auto;
-  position: relative;
-  background: #FFF;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: '';  
-  width: calc(100% - 30px);
-  height: calc(100% - 30px);
-  top: 15px;
-  left: 15px;
-  position: absolute;
-  background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%), radial-gradient(circle 28px at 28px 28px, #DDD 99%, transparent 0), linear-gradient(#DDD 24px, transparent 0), linear-gradient(#DDD 18px, transparent 0), linear-gradient(#DDD 66px, transparent 0);
-  background-repeat: no-repeat;
-  background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px;
-  background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
-  }
-  100% {
-    background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
-  }
-}
-`,
-    },
-  {
-    id: "povx9GSkelw7f6a",
-    html: `<span class="loader"></span>`,
-    css: `.loader{
-      width: 315px;
-      height: 200px;
-      background:
-          linear-gradient(0.25turn, transparent, #FFF, transparent),
-          linear-gradient(#DDD, #DDD),
-          radial-gradient(38px circle at 19px 19px, #DDD 50%, transparent 51%),
-          linear-gradient(#DDD, #DDD);
-      background-color: #fff;
-      background-repeat: no-repeat;
-      background-size: 315px 200px, 315px 130px, 100px 100px, 225px 30px;
-      background-position: -315px 0, 0 0, 15px 140px, 65px 145px;
-      animation: loading 1.5s infinite;
-  }
-
-  @keyframes loading {
-    to {
-      background-position: 315px 0, 0 0, 15px 140px, 65px 145px;
-    }
-  }
-  `
-  },
-
-  {
-    id: "sklCrdCrl2xTl",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 215px;
-  height: 215px;
-  display: block;
-  margin: auto;
-  position: relative;
-  background: #FFF;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: '';
-  width: calc(100% - 30px);
-  height: calc(100% - 30px);
-  top: 15px;
-  left: 15px;
-  position: absolute;
-  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
-   radial-gradient(circle 50px , #DDD 100%, transparent 0),
-   linear-gradient(#DDD 16px, transparent 0),
-   linear-gradient(#DDD 24px, transparent 0);
-  background-repeat: no-repeat;
-  background-size: 75px 175px, 100% 100px, 80% 16px, 80% 16px;
-  background-position: -185px 0, center 10px, center 125px, center 155px;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite;
-}
-
-@keyframes animloader {
-  to {
-    background-position: 185px 0, center 10px, center 125px, center 155px;
-  }
-}
-  `
-  },
-    
-    
-    {
-        id: "a31hn504vze",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  width: 215px;
-  height: 215px;
-  display: block;
-  margin: auto;
-  position: relative;
-  background: #FFF;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: '';
-  width: calc(100% - 30px);
-  height: calc(100% - 15px);
-  top: 15px;
-  left: 15px;
-  position: absolute;
-  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
-   linear-gradient(#DDD 100px, transparent 0),
-   linear-gradient(#DDD 16px, transparent 0),
-   linear-gradient(#DDD 50px, transparent 0);
-  background-repeat: no-repeat;
-  background-size: 75px 175px, 100% 100px, 100% 16px, 100% 30px;
-  background-position: -185px 0, center 0, center 115px, center 142px;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite;
-}
-
-@keyframes animloader {
-  to {
-    background-position: 185px 0, center 0, center 115px, center 142px;
-  }
-}
-
-`,
-    },
-    
-    {
-        id: "sklCrdSqr2xtxt",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-      width: 215px;
-      height: 220px;
-      background:
-          linear-gradient(0.25turn, transparent, #FFF, transparent),
-          linear-gradient(#DDD, #DDD),
-          linear-gradient(#DDD, #DDD),
-          linear-gradient(#DDD, #DDD);
-      background-color: #fff;
-      background-repeat: no-repeat;
-      background-size: 215px 220px, 215px 130px, 100px 15px, 150px 15px;
-      background-position: -215px 0, 0 0, 15px 150px, 15px 180px;
-      animation: loading 1.5s infinite;
-  }
-
-  @keyframes loading {
-    to {
-      background-position: 215px 0, 0 0, 15px 150px, 15px 180px;
-    }
-  }
-`,
-    },
-
-
-
-]
\ No newline at end of file
diff --git a/js/loaders/text.js b/js/loaders/text.js
deleted file mode 100644
index 000fbf1..0000000
--- a/js/loaders/text.js
+++ /dev/null
@@ -1,835 +0,0 @@
-export const TEXT = [
-    {
-        id: "n8abp6kko7",
-        content: 'Loading',
-        html: `<span class="loader">Loading</span>`,
-        css: `.loader {
-  font-size: 48px;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: bold;
-  display: inline-block;
-  color: #FF3D00;
-  letter-spacing: 2px;
-  position: relative;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: 'Loading';
-  position: absolute;
-  left: 0;
-  top: 0;
-  color: #FFF;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-  animation: animloader 6s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    height: 100%;
-  }
-  100% {
-    height: 0%;
-  }
-}
-`,
-    }, {
-        id: "xkjlk7q886r",
-        content: 'Loading',
-        html: `<span class="loader">Loading</span>`,
-        css: `.loader {
-  font-size: 48px;
-  display: inline-block;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: bold;
-  color: #FFF;
-  letter-spacing: 2px;
-  position: relative;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: 'Loading';
-  position: absolute;
-  left: 0;
-  top: 0;
-  color: #263238;
-  text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-  animation: animloader 6s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    height: 100%;
-  }
-  100% {
-    height: 0%;
-  }
-}
-`,
-    }, {
-        id: "x5uh05vpzo",
-        content: 'Loading',
-        html: `<span class="loader">Loading</span>`,
-        css: `.loader {
-  font-size: 48px;
-  display: inline-block;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: bold;
-  color: #263238;
-  box-sizing: border-box;
-  text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF;
-  letter-spacing: 2px;
-  position: relative;
-}
-.loader::after {
-  content: 'Loading';
-  position: absolute;
-  left: 0;
-  top: 0;
-  color: #FFF;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-  animation: animloader 6s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    width: 0%;
-  }
-  100% {
-    width: 100%;
-  }
-}
-`,
-    }, {
-        id: "b8snykspq3",
-        content: 'L &nbsp; ading',
-        html: `<span class="loader">L &nbsp; ading</span>`,
-        css: `.loader {
-  display: inline-block;
-  font-size: 48px;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: bold;
-  color: #FFF;
-  position: relative;
-}
-.loader::before {
-  content: '';  
-  position: absolute;
-  left: 34px;
-  bottom: 8px;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  border: 5px solid #FFF;
-  border-bottom-color: #FF3D00;
-  box-sizing: border-box;
-  animation: rotation 0.6s linear infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} `,
-    }, {
-        id: "96huvhm2ehv",
-        content: 'Load&nbsp;ng',
-        html: `<span class="loader">Load&nbsp;ng</span>`,
-        css: `.loader {
-  color: #FFF;
-  position: relative;
-  display: inline-block;
-  margin-top: 40px;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 48px;
-  letter-spacing: 4px;
-  box-sizing: border-box;
-}
-.loader::before {
-  content: '';  
-  position: absolute;
-  right: 70px;
-  bottom: 10px;
-  height: 28px;
-  width: 5.15px;
-  background: currentColor;
-  box-sizing: border-box;
-  animation: animloader1 1s linear infinite alternate;
-}
-.loader::after {
-  content: '';  
-  width: 10px;
-  height: 10px;
-  position: absolute;
-  left: 125px;
-  top: 2px;
-  border-radius: 50%;
-  background: red;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite alternate;
-}
-
-@keyframes animloader {
-  0% {
-    transform: translate(0px, 0px) scaleX(1);
-  }
-  14% {
-    transform: translate(-12px, -16px) scaleX(1.05);
-  }
-  28% {
-    transform: translate(-27px, -28px) scaleX(1.07);
-  }
-  42% {
-    transform: translate(-46px, -35px) scaleX(1.1);
-  }
-  57% {
-    transform: translate(-70px, -37px) scaleX(1.1);
-  }
-  71% {
-    transform: translate(-94px, -32px) scaleX(1.07);
-  }
-  85% {
-    transform: translate(-111px, -22px) scaleX(1.05);
-  }
-  100% {
-    transform: translate(-125px, -9px) scaleX(1);
-  }
-}
-
-@keyframes animloader1 {
-  0% {
-    box-shadow: 0 -6px, -122.9px -8px;
-  }
-  25%, 75% {
-    box-shadow: 0 0px, -122.9px -8px;
-  }
-  100% {
-    box-shadow: 0 0px, -122.9px -16px;
-  }
-}
-`,
-    },
-    
-    {
-      id: "oq8vTeX8tt5n9",
-      html: `<span class="loader">Load&nbsp;ng</span>`,
-      css: `.loader{
-    font-size: 48px;
-    color: transparent;
-    overflow:hidden;
-    display: inline-block;
-    font-family: Arial, Helvetica, sans-serif;
-    text-shadow:0 0 #FFF, 5em 0 #FFF;
-    animation:marquee 2s infinite ease;
-  }
-  .loader:before {
-    content:"Loading...";
-  }
-
-  @keyframes marquee {to{text-shadow:-5em 0 #FFF, 0 0 #FFF}}
-`
-    },
-    
-    
-    {
-        id: "oq8v82tt5n9",
-        content: 'Load&nbsp;ng',
-        html: `<span class="loader">Load&nbsp;ng</span>`,
-        css: `.loader {
-  color: #FFF;
-  position: relative;
-  display: inline-block;
-  margin-top: 20px;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 48px;
-  letter-spacing: 4px;
-  box-sizing: border-box;
-}
-.loader::before {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  right: 70px;
-  bottom: 10px;
-  height: 24px;
-  width: 5.15px;
-  background: currentColor;
-}
-.loader::after {
-  content: '';  
-  width: 8px;
-  height: 8px;
-  position: absolute;
-  left: 125px;
-  top: 2px;
-  border-radius: 50%;
-  background: red;
-  box-sizing: border-box;
-  animation: animloader 1s ease-in infinite;
-}
-
-@keyframes animloader {
-  0% {
-    transform: translateY(8px) scaleY(1) scaleX(1.25);
-  }
-  25%, 75% {
-    transform: translateY(-5px) scaleY(1.2) scaleX(1);
-  }
-  50% {
-    transform: translateY(-10px) scaleY(1) scaleX(1);
-  }
-  100% {
-    transform: translateY(8px) scaleY(0.8) scaleX(0.8);
-  }
-}
-`,
-    }, {
-        id: "x6aic1riy0h",
-        content: 'Loading',
-        html: `<span class="loader">Loading</span>`,
-        css: `.loader {
-  color: #FFF;
-  display: inline-block;
-  position: relative;
-  font-size: 48px;
-  font-family: Arial, Helvetica, sans-serif;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: '';  
-  width: 5px;
-  height: 5px;
-  background: currentColor;
-  position: absolute;
-  bottom: 10px;
-  right: -5px;
-  box-sizing: border-box;
-  animation: animloader 1s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0);
-  }
-  50% {
-    box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0);
-  }
-  100% {
-    box-shadow: 10px 0 white, 20px 0 white;
-  }
-}
-`,
-    },
-  {
-    id: "text-spotlight-elate",
-    content: 'Loading',
-    html: `<span class="loader">Loading</span>`,
-    css: `.loader {
-  font-size: 48px;
-  font-weight: 600;
-  display: inline-block;
-  letter-spacing: 2px;
-  font-family: Arial, Helvetica, sans-serif;
-  color: #FFF;
-  box-sizing: border-box;
-  animation: spotlight 2s linear infinite alternate;
-}
-
-@keyframes spotlight {
-  0% , 20% {
-    opacity: 1;
-    letter-spacing: 2px;
-   }
- 80% , 100% {
-    opacity: 0;
-    letter-spacing: 32px;
-   }
-}
-      `
-  },
-    
-    {
-        id: "i9vseffpc6r",
-        content: 'Load&nbsp;ng',
-        html: `<span class="loader">Load&nbsp;ng</span>`,
-        css: `.loader {
-  color: #FFF;
-  display: inline-block;
-  position: relative;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 48px;
-  letter-spacing: 4px;
-  box-sizing: border-box;
-}
-.loader::before {
-  content: '';  
-  position: absolute;
-  right: 70px;
-  bottom: 10px;
-  height: 24px;
-  width: 5px;
-  background: currentColor;
-  box-sizing: border-box;
-}
-.loader::after {
-  content: '';  
-  width: 4px;
-  height: 4px;
-  background: currentColor;
-  position: absolute;
-  right: 70px;
-  top: 8px;
-  box-sizing: border-box;
-  animation: animloader 0.6s ease-out infinite alternate;
-}
-
-@keyframes animloader {
-  0% {
-    top: 8px;
-    transform: rotate(0deg) scale(1);
-  }
-  100% {
-    top: 0px;
-    transform: rotate(180deg) scale(1.5);
-  }
-}
-`,
-    }, {
-        id: "3bdczi78s17",
-        content: 'Load&nbsp;ng',
-        html: `<span class="loader">Load&nbsp;ng</span>`,
-        css: `.loader {
-  color: #FFF;
-  display: inline-block;
-  position: relative;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 48px;
-  letter-spacing: 4px;
-  box-sizing: border-box;
-}
-.loader::before {
-  content: '';  
-  position: absolute;
-  right: 68px;
-  bottom: 10px;
-  height: 24px;
-  width: 7px;
-  outline: 1px solid #FFF;
-  color: #FF3D00;
-  box-sizing: border-box;
-  animation: animloader1 1s linear infinite alternate;
-}
-.loader::after {
-  content: '';  
-  width: 4px;
-  height: 4px;
-  background: #FF3D00;
-  position: absolute;
-  right: 70px;
-  top: 8px;
-  box-sizing: border-box;
-  animation: animloader 1s ease-out infinite alternate;
-}
-
-@keyframes animloader {
-  0% {
-    top: 8px;
-    transform: rotate(0deg) scale(1);
-  }
-  100% {
-    top: 0px;
-    transform: rotate(180deg) scale(1.5);
-  }
-}
-
-@keyframes animloader1 {
-  0% {
-    box-shadow: 0 0 inset;
-  }
-  100% {
-    box-shadow: 0 -28px inset;
-  }
-}
-`,
-    }, {
-        id: "p8ibtm0n4y",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
-  position: relative;
-  display: inline-block;
-}
-.loader::before {
-  
-  content: 'Loading';
-  color: #FFF;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 48px;
-  letter-spacing: 2px;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: floating 1s ease-out infinite alternate;
-}
-.loader::after {
-  content: '';  
-  width: 100%;
-  height: 10px;
-  background: rgba(0, 0, 0, 0.15);
-  position: absolute;
-  left: 0;
-  top: 100%;
-  filter: blur(4px);
-  border-radius: 50%;
-  box-sizing: border-box;
-  animation: animloader 1s ease-out infinite alternate;
-}
-
-@keyframes floating {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(-25px);
-  }
-}
-
-@keyframes animloader {
-  0% {
-    transform: scale(0.8);
-  }
-  100% {
-    transform: scale(1.2);
-  }
-}
-`,
-    }, {
-        id: "6y36vminasy",
-        content: 'Loading',
-        html: `<span class="loader">Loading</span>`,
-        css: `.loader {
-  font-size: 48px;
-  display: inline-block;
-  letter-spacing: 2px;
-  font-family: Arial, Helvetica, sans-serif;
-  color: #FFF;
-  box-sizing: border-box;
-  animation: animloader 1s ease-in infinite alternate;
-}
-
-@keyframes animloader {
-  0% {
-    filter: blur(0px);
-    transform: skew(0deg);
-  }
-  100% {
-    filter: blur(3px);
-    transform: skew(-4deg);
-  }
-}
-`,
-    }, {
-        id: "m1ofkeibm7",
-        content: 'Loading',
-        html: `<span class="loader">Loading</span>`,
-        css: `.loader {
-  font-size: 48px;
-  display: inline-block;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: bold;
-  color: #FF3D00;
-  letter-spacing: 2px;
-  position: relative;
-}
-.loader::after {
-  content: 'Loading';
-  position: absolute;
-  left: 0;
-  top: 0;
-  color: #FFF;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-  animation: animloader 10s ease-in infinite;
-}
-
-@keyframes animloader {
-  0% {
-    width: 0%;
-  }
-  100% {
-    width: 100%;
-  }
-}
-`,
-    },
-    {
-      id: "text-fkeibm",
-      content: 'Loading',
-      html: `<span class="loader">Loading</span>`,
-      css: `.loader{
-        font-size: 48px;
-        color: #FFF;
-        display: inline-block;
-        font-family: Arial, Helvetica, sans-serif;
-        font-weight: 400;
-        position: relative;
-      }
-      .loader:after{
-        content: '';
-        height: 4px;
-        width:0%;
-        display: block;
-        background: #FF3D00;
-        animation: 5s lineGrow linear infinite;
-      }
-      
-      @keyframes lineGrow {to{width: 100%;}}
-`,
-  },
-
-
-  {
-    id: "textFlowBrkbxb78im",
-    content: 'Loading',
-    html: `<span class="loader">Loading</span>`,
-    css: `.loader{
-        display: inline-block;
-        text-align: center;
-        line-height: 86px;
-        text-align: center;
-        position: relative;
-        padding: 0 48px;
-        font-size: 48px;
-        font-family: Arial, Helvetica, sans-serif;
-        color: #fff;
-        }
-        .loader:before, .loader:after {
-          content: "";
-          display: block;
-          width: 15px;
-          height: 15px;
-          background: currentColor;
-          position: absolute;
-          animation: load .7s infinite alternate ease-in-out;
-          top: 0;
-        }
-        .loader:after {
-          top: auto;
-          bottom: 0;
-        }
-      @keyframes load {
-        0% {
-          left: 0;
-          height: 43px;
-          width: 15px;
-          transform: translateX(0)
-        }
-        50% {
-          height: 10px;
-          width: 40px
-        }
-        100% {
-          left: 100%;
-          height: 43px;
-          width: 15px;
-          transform: translateX(-100%)
-        }
-      }
-`,
-  },
-
-    {
-      id: "text-ub-prog-im",
-      html: `<span class="loader"></span>`,
-      css: `.loader{
-      font-size: 48px;
-      color: #FFF;
-      display: inline-block;
-      font-family: Arial, Helvetica, sans-serif;
-      font-weight: 400;
-      position: relative;
-    }
-    .loader:after{
-      content: 'Loading';
-      position: relative;
-      z-index: 5;
-    }
-    .loader:before{
-      content: '';
-      height: 6px;
-      border: 1px solid;
-      border-radius: 10px;
-      width: 100%;
-      position: absolute;
-      bottom: 0px;
-      background: linear-gradient(#FF3D00 100%, transparent 0) no-repeat;
-      background-size: 0% auto;
-      animation: 10s lineGrow linear infinite;
-    }
-
-    @keyframes lineGrow {to {  background-size: 100% auto}}
-`,
-  },
-  
-  {
-    id: "text-typ-an",
-    html: `<span class="loader"></span>`,
-    css: `.loader{
-      font-size: 48px;
-      color: #FFF;
-      display: inline-block;
-      font-family: Arial, Helvetica, sans-serif;
-      font-weight: 400;
-      position: relative;
-    }
-    .loader:before{
-      content: '';
-      animation: 5s print linear alternate infinite;
-    }
-    .loader:after{
-      content: '';
-      position: absolute;
-      right: -4px;
-      top: 50%;
-      transform: translatey(-45%);
-      width: 2px;
-      height: 1.3em;
-      background: currentColor;
-      opacity: 0.8;
-      animation: 1s blink steps(2) infinite;
-    }
-    
-    @keyframes blink {
-      0%  { visibility: hidden;}
-      100%  { visibility: visible;}
-    }
-    @keyframes print {
-      0% { content: 'L'}
-      10% { content: 'Lo'}
-      20% { content: 'Loa'}
-      30% { content: 'Load'}
-      40% { content: 'Loadi'}
-      50% { content: 'Loadin'}
-      60% { content: 'Loading'}
-      70% { content: 'Loading.'}
-      80% { content: 'Loading..'}
-      90% , 100% { content: 'Loading...'}
-    }
-`,
-},
-  
-  {
-    id: "text-ball-spn-ar",
-    html: `<span class="loader"></span>`,
-    css: `.loader{
-    position: relative;
-    font-size: 48px;
-    letter-spacing: 2px;
-  }
-  .loader:before {
-    content: "Loading";
-    color: #fff;
-  }
-  .loader:after {
-    content: "";
-    width: 20px;
-    height: 20px;
-    background-color: #ff3d00;
-    border-radius: 50%;
-    position: absolute;
-    inset: 0;
-    margin: auto;
-    top: -70px;
-    animation: motion 3s ease-in-out infinite;
-  }
-
-  @keyframes motion {
-    0%, 50%, 100% {
-      transform: translateX(0) scale(1);
-    }
-    25% {
-      transform: translateX(-100px) scale(0.3);
-    }
-    75% {
-      transform: translateX(100px) scale(0.3);
-    }
-  }
-`,
-},
-  {
-    id: "text-balloon",
-    html: `<span class="loader"></span>`,
-    css: `.loader{
-    position: relative;
-    font-size: 48px;
-    letter-spacing: 6px;
-  }
-  .loader:before {
-    content: "Loading";
-    color: #fff;
-  }
-  .loader:after {
-    content: "";
-    width: 20px;
-    height: 20px;
-    background-color: #ff3d00;
-    background-image: radial-gradient(circle 2px, #fff4 100%, transparent 0),
-      radial-gradient(circle 1px, #fff3 100%, transparent 0);
-    background-position: 14px -4px, 12px -1px;
-    border-radius: 50%;
-    position: absolute;
-    margin: auto;
-    top: -5px;
-    right: 66px;
-    transform-origin: center bottom;
-    animation: fillBaloon 1s ease-in-out infinite alternate;
-  }
-
-  @keyframes fillBaloon {
-    0% { transform: scale(1)}
-    100% { transform: scale(3)}
-  }
-`,
-},
-  {
-    id: "text-smoky",
-    html: `<span class="loader"></span>`,
-    css: `.loader{
-    font-size: 48px;
-    font-weight: bold;
-    letter-spacing: 2px;
-    font-family: Arial, Helvetica, sans-serif;
-    color: #fff;
-    animation: smokeOut 1s ease-in-out infinite alternate;
-    text-shadow: 0 0 1px white;
-  }
-  .loader:before {
-    content: "Loading";
-  }
-
-  @keyframes smokeOut {
-    100% {
-      opacity: 0.08;
-      filter: blur(5px);
-      letter-spacing: 4px;
-    }
-  }
-`,
-},
-
-
-]
-
-
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..78442ee
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3635 @@
+{
+  "name": "css-loaders",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "css-loaders",
+      "version": "0.0.0",
+      "dependencies": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      },
+      "devDependencies": {
+        "@eslint/js": "^9.21.0",
+        "@types/react": "^19.0.10",
+        "@types/react-dom": "^19.0.4",
+        "@vitejs/plugin-react": "^4.3.4",
+        "eslint": "^9.21.0",
+        "eslint-plugin-react-hooks": "^5.1.0",
+        "eslint-plugin-react-refresh": "^0.4.19",
+        "globals": "^15.15.0",
+        "sass": "^1.86.3",
+        "typescript": "~5.7.2",
+        "typescript-eslint": "^8.24.1",
+        "vite": "^6.2.0"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.26.8",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz",
+      "integrity": "sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.26.10",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz",
+      "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.26.2",
+        "@babel/generator": "^7.26.10",
+        "@babel/helper-compilation-targets": "^7.26.5",
+        "@babel/helper-module-transforms": "^7.26.0",
+        "@babel/helpers": "^7.26.10",
+        "@babel/parser": "^7.26.10",
+        "@babel/template": "^7.26.9",
+        "@babel/traverse": "^7.26.10",
+        "@babel/types": "^7.26.10",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.0.tgz",
+      "integrity": "sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.27.0",
+        "@babel/types": "^7.27.0",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.0.tgz",
+      "integrity": "sha512-LVk7fbXml0H2xH34dFzKQ7TDZ2G4/rVTOrq9V+icbbadjbVxxeFeDsNHv2SrZeWoA+6ZiTyWYWtScEIW07EAcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.26.8",
+        "@babel/helper-validator-option": "^7.25.9",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
+      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
+      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/traverse": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
+      "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
+      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.0.tgz",
+      "integrity": "sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.0",
+        "@babel/types": "^7.27.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
+      "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.9.tgz",
+      "integrity": "sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz",
+      "integrity": "sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
+      "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.26.2",
+        "@babel/parser": "^7.27.0",
+        "@babel/types": "^7.27.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.0.tgz",
+      "integrity": "sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.26.2",
+        "@babel/generator": "^7.27.0",
+        "@babel/parser": "^7.27.0",
+        "@babel/template": "^7.27.0",
+        "@babel/types": "^7.27.0",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
+      "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.2.tgz",
+      "integrity": "sha512-wCIboOL2yXZym2cgm6mlA742s9QeJ8DjGVaL39dLN4rRwrOgOyYSnOaFPhKZGLb2ngj4EyfAFjsNJwPXZvseag==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.2.tgz",
+      "integrity": "sha512-NQhH7jFstVY5x8CKbcfa166GoV0EFkaPkCKBQkdPJFvo5u+nGXLEH/ooniLb3QI8Fk58YAx7nsPLozUWfCBOJA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.2.tgz",
+      "integrity": "sha512-5ZAX5xOmTligeBaeNEPnPaeEuah53Id2tX4c2CVP3JaROTH+j4fnfHCkr1PjXMd78hMst+TlkfKcW/DlTq0i4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.2.tgz",
+      "integrity": "sha512-Ffcx+nnma8Sge4jzddPHCZVRvIfQ0kMsUsCMcJRHkGJ1cDmhe4SsrYIjLUKn1xpHZybmOqCWwB0zQvsjdEHtkg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.2.tgz",
+      "integrity": "sha512-MpM6LUVTXAzOvN4KbjzU/q5smzryuoNjlriAIx+06RpecwCkL9JpenNzpKd2YMzLJFOdPqBpuub6eVRP5IgiSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.2.tgz",
+      "integrity": "sha512-5eRPrTX7wFyuWe8FqEFPG2cU0+butQQVNcT4sVipqjLYQjjh8a8+vUTfgBKM88ObB85ahsnTwF7PSIt6PG+QkA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.2.tgz",
+      "integrity": "sha512-mLwm4vXKiQ2UTSX4+ImyiPdiHjiZhIaE9QvC7sw0tZ6HoNMjYAqQpGyui5VRIi5sGd+uWq940gdCbY3VLvsO1w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.2.tgz",
+      "integrity": "sha512-6qyyn6TjayJSwGpm8J9QYYGQcRgc90nmfdUb0O7pp1s4lTY+9D0H9O02v5JqGApUyiHOtkz6+1hZNvNtEhbwRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.2.tgz",
+      "integrity": "sha512-UHBRgJcmjJv5oeQF8EpTRZs/1knq6loLxTsjc3nxO9eXAPDLcWW55flrMVc97qFPbmZP31ta1AZVUKQzKTzb0g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.2.tgz",
+      "integrity": "sha512-gq/sjLsOyMT19I8obBISvhoYiZIAaGF8JpeXu1u8yPv8BE5HlWYobmlsfijFIZ9hIVGYkbdFhEqC0NvM4kNO0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.2.tgz",
+      "integrity": "sha512-bBYCv9obgW2cBP+2ZWfjYTU+f5cxRoGGQ5SeDbYdFCAZpYWrfjjfYwvUpP8MlKbP0nwZ5gyOU/0aUzZ5HWPuvQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.2.tgz",
+      "integrity": "sha512-SHNGiKtvnU2dBlM5D8CXRFdd+6etgZ9dXfaPCeJtz+37PIUlixvlIhI23L5khKXs3DIzAn9V8v+qb1TRKrgT5w==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.2.tgz",
+      "integrity": "sha512-hDDRlzE6rPeoj+5fsADqdUZl1OzqDYow4TB4Y/3PlKBD0ph1e6uPHzIQcv2Z65u2K0kpeByIyAjCmjn1hJgG0Q==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.2.tgz",
+      "integrity": "sha512-tsHu2RRSWzipmUi9UBDEzc0nLc4HtpZEI5Ba+Omms5456x5WaNuiG3u7xh5AO6sipnJ9r4cRWQB2tUjPyIkc6g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.2.tgz",
+      "integrity": "sha512-k4LtpgV7NJQOml/10uPU0s4SAXGnowi5qBSjaLWMojNCUICNu7TshqHLAEbkBdAszL5TabfvQ48kK84hyFzjnw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.2.tgz",
+      "integrity": "sha512-GRa4IshOdvKY7M/rDpRR3gkiTNp34M0eLTaC1a08gNrh4u488aPhuZOCpkF6+2wl3zAN7L7XIpOFBhnaE3/Q8Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.2.tgz",
+      "integrity": "sha512-QInHERlqpTTZ4FRB0fROQWXcYRD64lAoiegezDunLpalZMjcUcld3YzZmVJ2H/Cp0wJRZ8Xtjtj0cEHhYc/uUg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.2.tgz",
+      "integrity": "sha512-talAIBoY5M8vHc6EeI2WW9d/CkiO9MQJ0IOWX8hrLhxGbro/vBXJvaQXefW2cP0z0nQVTdQ/eNyGFV1GSKrxfw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.2.tgz",
+      "integrity": "sha512-voZT9Z+tpOxrvfKFyfDYPc4DO4rk06qamv1a/fkuzHpiVBMOhpjK+vBmWM8J1eiB3OLSMFYNaOaBNLXGChf5tg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.2.tgz",
+      "integrity": "sha512-dcXYOC6NXOqcykeDlwId9kB6OkPUxOEqU+rkrYVqJbK2hagWOMrsTGsMr8+rW02M+d5Op5NNlgMmjzecaRf7Tg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.2.tgz",
+      "integrity": "sha512-t/TkWwahkH0Tsgoq1Ju7QfgGhArkGLkF1uYz8nQS/PPFlXbP5YgRpqQR3ARRiC2iXoLTWFxc6DJMSK10dVXluw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.2.tgz",
+      "integrity": "sha512-cfZH1co2+imVdWCjd+D1gf9NjkchVhhdpgb1q5y6Hcv9TP6Zi9ZG/beI3ig8TvwT9lH9dlxLq5MQBBgwuj4xvA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.2.tgz",
+      "integrity": "sha512-7Loyjh+D/Nx/sOTzV8vfbB3GJuHdOQyrOryFdZvPHLf42Tk9ivBU5Aedi7iyX+x6rbn2Mh68T4qq1SDqJBQO5Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.2.tgz",
+      "integrity": "sha512-WRJgsz9un0nqZJ4MfhabxaD9Ft8KioqU3JMinOTvobbX6MOSUigSBlogP8QB3uxpJDsFS6yN+3FDBdqE5lg9kg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.2.tgz",
+      "integrity": "sha512-kM3HKb16VIXZyIeVrM1ygYmZBKybX8N4p754bw390wGO3Tf2j4L2/WYL+4suWujpgf6GBYs3jv7TyUivdd05JA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.5.1.tgz",
+      "integrity": "sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.0.tgz",
+      "integrity": "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.6",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.1.tgz",
+      "integrity": "sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.12.0.tgz",
+      "integrity": "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.24.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.24.0.tgz",
+      "integrity": "sha512-uIY/y3z0uvOGX8cp1C2fiC4+ZmBhp6yZWkojtHL1YEMnRt1Y63HB9TM17proGEmeG7HeUY+UP36F0aknKYTpYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.8.tgz",
+      "integrity": "sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.13.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit/node_modules/@eslint/core": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.13.0.tgz",
+      "integrity": "sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.2.tgz",
+      "integrity": "sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.39.0.tgz",
+      "integrity": "sha512-lGVys55Qb00Wvh8DMAocp5kIcaNzEFTmGhfFd88LfaogYTRKrdxgtlO5H6S49v2Nd8R2C6wLOal0qv6/kCkOwA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.39.0.tgz",
+      "integrity": "sha512-It9+M1zE31KWfqh/0cJLrrsCPiF72PoJjIChLX+rEcujVRCb4NLQ5QzFkzIZW8Kn8FTbvGQBY5TkKBau3S8cCQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.39.0.tgz",
+      "integrity": "sha512-lXQnhpFDOKDXiGxsU9/l8UEGGM65comrQuZ+lDcGUx+9YQ9dKpF3rSEGepyeR5AHZ0b5RgiligsBhWZfSSQh8Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.39.0.tgz",
+      "integrity": "sha512-mKXpNZLvtEbgu6WCkNij7CGycdw9cJi2k9v0noMb++Vab12GZjFgUXD69ilAbBh034Zwn95c2PNSz9xM7KYEAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.39.0.tgz",
+      "integrity": "sha512-jivRRlh2Lod/KvDZx2zUR+I4iBfHcu2V/BA2vasUtdtTN2Uk3jfcZczLa81ESHZHPHy4ih3T/W5rPFZ/hX7RtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.39.0.tgz",
+      "integrity": "sha512-8RXIWvYIRK9nO+bhVz8DwLBepcptw633gv/QT4015CpJ0Ht8punmoHU/DuEd3iw9Hr8UwUV+t+VNNuZIWYeY7Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.39.0.tgz",
+      "integrity": "sha512-mz5POx5Zu58f2xAG5RaRRhp3IZDK7zXGk5sdEDj4o96HeaXhlUwmLFzNlc4hCQi5sGdR12VDgEUqVSHer0lI9g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.39.0.tgz",
+      "integrity": "sha512-+YDwhM6gUAyakl0CD+bMFpdmwIoRDzZYaTWV3SDRBGkMU/VpIBYXXEvkEcTagw/7VVkL2vA29zU4UVy1mP0/Yw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.39.0.tgz",
+      "integrity": "sha512-EKf7iF7aK36eEChvlgxGnk7pdJfzfQbNvGV/+l98iiMwU23MwvmV0Ty3pJ0p5WQfm3JRHOytSIqD9LB7Bq7xdQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.39.0.tgz",
+      "integrity": "sha512-vYanR6MtqC7Z2SNr8gzVnzUul09Wi1kZqJaek3KcIlI/wq5Xtq4ZPIZ0Mr/st/sv/NnaPwy/D4yXg5x0B3aUUA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.39.0.tgz",
+      "integrity": "sha512-NMRUT40+h0FBa5fb+cpxtZoGAggRem16ocVKIv5gDB5uLDgBIwrIsXlGqYbLwW8YyO3WVTk1FkFDjMETYlDqiw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.39.0.tgz",
+      "integrity": "sha512-0pCNnmxgduJ3YRt+D+kJ6Ai/r+TaePu9ZLENl+ZDV/CdVczXl95CbIiwwswu4L+K7uOIGf6tMo2vm8uadRaICQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.39.0.tgz",
+      "integrity": "sha512-t7j5Zhr7S4bBtksT73bO6c3Qa2AV/HqiGlj9+KB3gNF5upcVkx+HLgxTm8DK4OkzsOYqbdqbLKwvGMhylJCPhQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.39.0.tgz",
+      "integrity": "sha512-m6cwI86IvQ7M93MQ2RF5SP8tUjD39Y7rjb1qjHgYh28uAPVU8+k/xYWvxRO3/tBN2pZkSMa5RjnPuUIbrwVxeA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.39.0.tgz",
+      "integrity": "sha512-iRDJd2ebMunnk2rsSBYlsptCyuINvxUfGwOUldjv5M4tpa93K8tFMeYGpNk2+Nxl+OBJnBzy2/JCscGeO507kA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.39.0.tgz",
+      "integrity": "sha512-t9jqYw27R6Lx0XKfEFe5vUeEJ5pF3SGIM6gTfONSMb7DuG6z6wfj2yjcoZxHg129veTqU7+wOhY6GX8wmf90dA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.39.0.tgz",
+      "integrity": "sha512-ThFdkrFDP55AIsIZDKSBWEt/JcWlCzydbZHinZ0F/r1h83qbGeenCt/G/wG2O0reuENDD2tawfAj2s8VK7Bugg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.39.0.tgz",
+      "integrity": "sha512-jDrLm6yUtbOg2TYB3sBF3acUnAwsIksEYjLeHL+TJv9jg+TmTwdyjnDex27jqEMakNKf3RwwPahDIt7QXCSqRQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.39.0.tgz",
+      "integrity": "sha512-6w9uMuza+LbLCVoNKL5FSLE7yvYkq9laSd09bwS0tMjkwXrmib/4KmoJcrKhLWHvw19mwU+33ndC69T7weNNjQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.39.0.tgz",
+      "integrity": "sha512-yAkUOkIKZlK5dl7u6dg897doBgLXmUHhIINM2c+sND3DZwnrdQkkSiDh7N75Ll4mM4dxSkYfXqU9fW3lLkMFug==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.7.tgz",
+      "integrity": "sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
+      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-UaicktuQI+9UKyA4njtDOGBD/67t8YEBt2xdfqu8+gP9hqPUPsiXlNPcpS2gVdjmis5GKPG3fCxbQLVgxsQZ8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.1.tgz",
+      "integrity": "sha512-jFf/woGTVTjUJsl2O7hcopJ1r0upqoq/vIOoCj0yLh3RIXxWcljlpuZ+vEBRXsymD1jhfeJrlyTy/S1UW+4y1w==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.29.0.tgz",
+      "integrity": "sha512-PAIpk/U7NIS6H7TEtN45SPGLQaHNgB7wSjsQV/8+KYokAb2T/gloOA/Bee2yd4/yKVhPKe5LlaUGhAZk5zmSaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.29.0",
+        "@typescript-eslint/type-utils": "8.29.0",
+        "@typescript-eslint/utils": "8.29.0",
+        "@typescript-eslint/visitor-keys": "8.29.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.0.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.29.0.tgz",
+      "integrity": "sha512-8C0+jlNJOwQso2GapCVWWfW/rzaq7Lbme+vGUFKE31djwNncIpgXD7Cd4weEsDdkoZDjH0lwwr3QDQFuyrMg9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.29.0",
+        "@typescript-eslint/types": "8.29.0",
+        "@typescript-eslint/typescript-estree": "8.29.0",
+        "@typescript-eslint/visitor-keys": "8.29.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.29.0.tgz",
+      "integrity": "sha512-aO1PVsq7Gm+tcghabUpzEnVSFMCU4/nYIgC2GOatJcllvWfnhrgW0ZEbnTxm36QsikmCN1K/6ZgM7fok2I7xNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.29.0",
+        "@typescript-eslint/visitor-keys": "8.29.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.29.0.tgz",
+      "integrity": "sha512-ahaWQ42JAOx+NKEf5++WC/ua17q5l+j1GFrbbpVKzFL/tKVc0aYY8rVSYUpUvt2hUP1YBr7mwXzx+E/DfUWI9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "8.29.0",
+        "@typescript-eslint/utils": "8.29.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.0.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.29.0.tgz",
+      "integrity": "sha512-wcJL/+cOXV+RE3gjCyl/V2G877+2faqvlgtso/ZRbTCnZazh0gXhe+7gbAnfubzN2bNsBtZjDvlh7ero8uIbzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.29.0.tgz",
+      "integrity": "sha512-yOfen3jE9ISZR/hHpU/bmNvTtBW1NjRbkSFdZOksL1N+ybPEE7UVGMwqvS6CP022Rp00Sb0tdiIkhSCe6NI8ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.29.0",
+        "@typescript-eslint/visitor-keys": "8.29.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.0.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.29.0.tgz",
+      "integrity": "sha512-gX/A0Mz9Bskm8avSWFcK0gP7cZpbY4AIo6B0hWYFCaIsz750oaiWR4Jr2CI+PQhfW1CpcQr9OlfPS+kMFegjXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.29.0",
+        "@typescript-eslint/types": "8.29.0",
+        "@typescript-eslint/typescript-estree": "8.29.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.29.0.tgz",
+      "integrity": "sha512-Sne/pVz8ryR03NFK21VpN88dZ2FdQXOlq3VIklbrTYEt8yXtRFr9tvUhqvCeKjqYk5FSim37sHbooT6vzBTZcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.29.0",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz",
+      "integrity": "sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.26.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.25.9",
+        "@babel/plugin-transform-react-jsx-source": "^7.25.9",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.14.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
+      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001688",
+        "electron-to-chromium": "^1.5.73",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.1"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001712",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001712.tgz",
+      "integrity": "sha512-MBqPpGYYdQ7/hfKiet9SCI+nmN5/hp4ZzveOJubl5DTAMa5oggjAuoi0Z4onBpKPFI2ePGnQuQIzF3VxDjDJig==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.132",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.132.tgz",
+      "integrity": "sha512-QgX9EBvWGmvSRa74zqfnG7+Eno0Ak0vftBll0Pt2/z5b3bEGYL6OUXLgKPtvx73dn3dvwrlyVkjPKRRlhLYTEg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.2.tgz",
+      "integrity": "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.2",
+        "@esbuild/android-arm": "0.25.2",
+        "@esbuild/android-arm64": "0.25.2",
+        "@esbuild/android-x64": "0.25.2",
+        "@esbuild/darwin-arm64": "0.25.2",
+        "@esbuild/darwin-x64": "0.25.2",
+        "@esbuild/freebsd-arm64": "0.25.2",
+        "@esbuild/freebsd-x64": "0.25.2",
+        "@esbuild/linux-arm": "0.25.2",
+        "@esbuild/linux-arm64": "0.25.2",
+        "@esbuild/linux-ia32": "0.25.2",
+        "@esbuild/linux-loong64": "0.25.2",
+        "@esbuild/linux-mips64el": "0.25.2",
+        "@esbuild/linux-ppc64": "0.25.2",
+        "@esbuild/linux-riscv64": "0.25.2",
+        "@esbuild/linux-s390x": "0.25.2",
+        "@esbuild/linux-x64": "0.25.2",
+        "@esbuild/netbsd-arm64": "0.25.2",
+        "@esbuild/netbsd-x64": "0.25.2",
+        "@esbuild/openbsd-arm64": "0.25.2",
+        "@esbuild/openbsd-x64": "0.25.2",
+        "@esbuild/sunos-x64": "0.25.2",
+        "@esbuild/win32-arm64": "0.25.2",
+        "@esbuild/win32-ia32": "0.25.2",
+        "@esbuild/win32-x64": "0.25.2"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.24.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.24.0.tgz",
+      "integrity": "sha512-eh/jxIEJyZrvbWRe4XuVclLPDYSYYYgLy5zXGGxD6j8zjSAxFEzI2fL/8xNq6O2yKqVt+eF2YhV+hxjV6UKXwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.20.0",
+        "@eslint/config-helpers": "^0.2.0",
+        "@eslint/core": "^0.12.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.24.0",
+        "@eslint/plugin-kit": "^0.2.7",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.3.0",
+        "eslint-visitor-keys": "^4.2.0",
+        "espree": "^10.3.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.4.19",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.19.tgz",
+      "integrity": "sha512-eyy8pcr/YxSYjBoqIFSrlbn9i/xvxUFa8CjzAYo9cFjgGXqq1hyjihcpZvxRLalpaWmueWR81xn7vuKmAFijDQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=8.40"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
+      "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
+      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
+      "integrity": "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
+      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.0"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
+      "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.39.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.39.0.tgz",
+      "integrity": "sha512-thI8kNc02yNvnmJp8dr3fNWJ9tCONDhp6TV35X6HkKGGs9E6q7YWCHbe5vKiTa7TAiNcFEmXKj3X/pG2b3ci0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.7"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.39.0",
+        "@rollup/rollup-android-arm64": "4.39.0",
+        "@rollup/rollup-darwin-arm64": "4.39.0",
+        "@rollup/rollup-darwin-x64": "4.39.0",
+        "@rollup/rollup-freebsd-arm64": "4.39.0",
+        "@rollup/rollup-freebsd-x64": "4.39.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.39.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.39.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.39.0",
+        "@rollup/rollup-linux-arm64-musl": "4.39.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.39.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.39.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.39.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.39.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.39.0",
+        "@rollup/rollup-linux-x64-gnu": "4.39.0",
+        "@rollup/rollup-linux-x64-musl": "4.39.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.39.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.39.0",
+        "@rollup/rollup-win32-x64-msvc": "4.39.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.86.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.86.3.tgz",
+      "integrity": "sha512-iGtg8kus4GrsGLRDLRBRHY9dNVA78ZaS7xr01cWnS7PEMQyFtTqBiyCrfpTYTZXRWM94akzckYjh8oADfFNTzw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
+      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/typescript-eslint": {
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.29.0.tgz",
+      "integrity": "sha512-ep9rVd9B4kQsZ7ZnWCVxUE/xDLUUUsRzE0poAeNu+4CkFErLfuvPt/qtm2EpnSyfvsR0S6QzDFSrPCFBwf64fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.29.0",
+        "@typescript-eslint/parser": "8.29.0",
+        "@typescript-eslint/utils": "8.29.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.5.tgz",
+      "integrity": "sha512-j023J/hCAa4pRIUH6J9HemwYfjB5llR2Ps0CWeikOtdR8+pAURAk0DoJC5/mm9kd+UgdnIy7d6HE4EAvlYhPhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "postcss": "^8.5.3",
+        "rollup": "^4.30.1"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..521319f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "css-loaders",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "sass": "^1.86.3",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  }
+}
diff --git a/images/Frame 5.png b/public/images/Frame 5.png
similarity index 100%
rename from images/Frame 5.png
rename to public/images/Frame 5.png
diff --git a/images/android-chrome-192x192.png b/public/images/android-chrome-192x192.png
similarity index 100%
rename from images/android-chrome-192x192.png
rename to public/images/android-chrome-192x192.png
diff --git a/images/android-chrome-512x512.png b/public/images/android-chrome-512x512.png
similarity index 100%
rename from images/android-chrome-512x512.png
rename to public/images/android-chrome-512x512.png
diff --git a/images/apple-touch-icon.png b/public/images/apple-touch-icon.png
similarity index 100%
rename from images/apple-touch-icon.png
rename to public/images/apple-touch-icon.png
diff --git a/images/codepen.png b/public/images/codepen.png
similarity index 100%
rename from images/codepen.png
rename to public/images/codepen.png
diff --git a/images/favicon-16x16.png b/public/images/favicon-16x16.png
similarity index 100%
rename from images/favicon-16x16.png
rename to public/images/favicon-16x16.png
diff --git a/images/favicon-32x32.png b/public/images/favicon-32x32.png
similarity index 100%
rename from images/favicon-32x32.png
rename to public/images/favicon-32x32.png
diff --git a/images/favicon.ico b/public/images/favicon.ico
similarity index 100%
rename from images/favicon.ico
rename to public/images/favicon.ico
diff --git a/images/git.png b/public/images/github.png
similarity index 100%
rename from images/git.png
rename to public/images/github.png
diff --git a/images/loader.png b/public/images/loader.png
similarity index 100%
rename from images/loader.png
rename to public/images/loader.png
diff --git a/images/mstile-150x150.png b/public/images/mstile-150x150.png
similarity index 100%
rename from images/mstile-150x150.png
rename to public/images/mstile-150x150.png
diff --git a/public/images/react.svg b/public/images/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/public/images/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/images/safari-pinned-tab.svg b/public/images/safari-pinned-tab.svg
similarity index 100%
rename from images/safari-pinned-tab.svg
rename to public/images/safari-pinned-tab.svg
diff --git a/public/images/vite.svg b/public/images/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/images/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/scss/styles.scss b/scss/styles.scss
deleted file mode 100644
index 702e900..0000000
--- a/scss/styles.scss
+++ /dev/null
@@ -1,301 +0,0 @@
-//out: ../css/styles.css, compress: true,
-
-
-$base: #263038;
-$lite:  #FFF;
-$brand: #FF3D00; //FF3D00
-$size: 48px;
-
-
-*, *:after, *:before {
-      box-sizing: border-box;
-    }
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-::-webkit-scrollbar:hover {
-  width: 18px;
-  background: #0004;
-}
-::-webkit-scrollbar-track:hover {
-  background: #0001; 
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: $base; 
-}
- 
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: $brand; 
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #fff; 
-}
-body {
-  margin: 0;
-  background: $base;
-  font-family: Arial, Helvetica, sans-serif;
-  > img {
-    display: none;
-  }
-  &.pop {
-    overflow: hidden;
-  }
-}
-
-
-header {
-  background : #0d161b;
-  padding:10px 20px;
-  min-height: 50px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  nav {
-    display: flex;
-    align-items: center;
-    justify-content: center; 
-
-    .nav-btn {
-      display: inline-block;
-      width: 32px;
-      height: 32px;
-      background-color: #fff;
-      background-repeat: no-repeat;
-      background-size: 110% auto;
-      background-position: center;
-      border-radius: 50%;
-      &.git {
-        background-image: url('../images/git.png');
-      }
-      &.codepen {
-        background-image: url('../images/codepen.png');
-      }
-
-      & + .nav-btn {
-        margin-left: 10px;
-      }
-    }
-  }
-}
-
-.brand {
-  color: #fff;
-  font-size: 32px;
-  display: inline-block;
-  position: relative;
-  &::after{
-    content: '';
-    position: absolute;
-    left: 20px;
-    bottom: 7px;
-    border: 3px solid $lite;
-    border-bottom-color: $brand;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    animation: brandRotation 0.6s linear infinite;
-  }
-}
-
-@keyframes brandRotation{
-  0% { transform: rotate(0deg)}
-  100% { transform: rotate(360deg)}
-}
-
-
-#main {
-  min-height: 100vh;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: space-between;
-    .section {
-      min-width: 200px;
-      width: 33.33%;
-      height: 360px;
-      padding: 10px;
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #ccc;
-      cursor: pointer;
-      transition: 0.2s linear;
-      &:nth-child(2n + 1){
-        background: rgba(#000,0.1);
-      }
-      &:hover {
-          background: rgba(#000,0.3) ;
-      }
-
-      @media (max-width: 768px ) {
-         width: 50%;
-      }
-      @media (max-width: 480px) {
-        width: 100%;
-      }
-
-    }
-}
-
-
-
-footer {
-  background : #0d161b;
-  padding:15px;
-  text-align: center;
-  color: #ccc;
-  width: 100%;
-  font-size: 12px;
-  a {
-    font-size: 16px;
-    color: #fff;
-    transition: 0.2s ease;
-    text-decoration: none;
-    display: inline-block;
-    position: relative;
-    &:hover , &:active {
-      color: #fff;
-      transform: scale(1.15);
-    }
-  }
-}
-
-.overlay {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(#000,0.7);
-  z-index: 2000;
-  visibility: hidden;
-  opacity: 0;
-  overflow-y: auto;
-  &.in {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-.btn-close {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    z-index: 5;
-    line-height: 20px;
-    height: 20px;
-    width: 20px;
-    font-size: 26px;
-    font-weight: 400;
-    padding: 0;
-    background: #eee;
-    border: none;
-    outline: none;
-    cursor: pointer;
-}
-
-.popup {
-  position: relative;
-  transform: translateY(-20px);
-  background: #fff;
-  padding: 20px 15px;
-  max-width: 600px;
-  min-height: 400px;
-  margin: 20px auto;
-  width: 100%;
-  transition: 0.2s ease-in;
-  .in & {
-    transform: translateY(10px);
-  }
-
-}
-
-.showcase {
-  background: $base;
-  margin-bottom: 15px;
-  .section {
-    width: 100%;
-    height: 300px;
-    padding: 10px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-.code-area {
-  .code-header{
-    padding: 5px 10px;
-    background: #222;
-    color: #fff;
-    font-size: 14px;
-    position: relative;
-  }
-
-  & + & {
-    margin-top: 10px;
-  }
-}
-.copy {
-  outline: none;
-  border: none;
-  background: #000;
-  position: absolute;
-  right: 5px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #fff;
-  padding: 3px 8px;
-  cursor: pointer;
-  user-select: none;
-  &::before {
-    content: '';
-    display: inline-block;
-    width: 10px;
-    height: 12px;
-    border: 1px solid #fff;
-    box-shadow: 2px -2px #000, 3px -3px;
-    margin-right: 8px;
-    position: relative;
-    top: 3px;
-  }
-}
-
-code {
-  background: #000;
-  padding: 5px 10px;
-  display: block;
-  white-space: pre;
-  color: #03a9f4;
-  min-height: 30px;
-  font-size: 14px;
-  line-height: 18px;
-}
-
-#markup{
-  color: #f4a003;
-}
-#css{
-  max-height: 200px;
-  overflow: auto;
-}
-
-
-
-// overwrite 
-div[data-id="prog-crak-erh"]{
-  justify-content: flex-start !important;
-}
-
diff --git a/src/App.scss b/src/App.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..8a49e8b
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,15 @@
+import './App.scss'
+import { Header , Footer, Outlet } from './components'
+
+function App() {
+
+  return (
+    <>
+      <Header />
+        <Outlet />
+      <Footer/>
+    </>
+  )
+}
+
+export default App
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
new file mode 100644
index 0000000..d6fe669
--- /dev/null
+++ b/src/components/Footer/Footer.module.scss
@@ -0,0 +1,20 @@
+.footer{
+        background: var(--footer-bg);
+        padding: 15px;
+        text-align: center;
+        color: var(--footer-color) ;
+        width: 100%;
+        font-size: 0.8rem;
+
+        a{
+            text-decoration: none;
+            color: inherit;
+            position: relative;
+            display: inline-block;
+            transform: scale(1);
+            transition: 0.2s ease-in;
+            &:hover{
+                transform: scale(1.1);
+            }
+        }
+}
\ No newline at end of file
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..6c0f36c
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './Footer.module.scss';
+
+
+const Footer = () => {
+  return (
+    <footer className={styles.footer}>
+        <a href="https://vineethtrv.github.io/" target="_blank" >
+            <span>👨&zwj;💻</span>
+            Vineeth TR
+        </a>
+    </footer>
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
new file mode 100644
index 0000000..6f3da33
--- /dev/null
+++ b/src/components/Header/Header.module.scss
@@ -0,0 +1,60 @@
+.header{
+    background: var(--header-bg);
+    padding: 0.5rem 1rem;
+    min-height: 3rem;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+
+    &_brand{
+        color: var(--secondary-color);
+        font-size: 2rem;
+        display: inline-block;
+        position: relative;
+        &::before{
+            content: '';
+            position: absolute;
+            left: 1.25rem;
+            top: 1rem;
+            border: 3px solid var(--secondary-color);
+            border-bottom-color: var(--primary-color);
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            animation: spin .6s linear infinite;
+        }
+    }
+
+    > nav{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+        > a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            width: 2rem;
+            height: 2rem;
+            background: var(--secondary-color);
+            background-size: 108% auto;
+            background-position: center;
+            background-repeat: no-repeat;
+        }
+        
+    }
+}
+
+@keyframes spin {
+    0%{
+        transform: rotate(0deg);
+    }
+    100%{
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000..d457822
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './Header.module.scss';
+import codepen from '/images/codepen.png';
+import github from '/images/github.png';
+
+const Header : React.FC = () => {
+  return (
+    <header className={styles.header}>
+        <span className={styles.header_brand}>L &nbsp; aders</span>
+
+        <nav>
+            <a target="_blank" style={{backgroundImage: `url(${codepen})`}} href="https://codepen.io/vineethtrv/pen/NWxZqMM"></a>
+            <a target="_blank" style={{backgroundImage: `url(${github})`}} href="https://github.com/vineethtrv/css-loader"></a>
+        </nav>
+    </header>
+  )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/components/Outlet/Outlet.module.scss b/src/components/Outlet/Outlet.module.scss
new file mode 100644
index 0000000..38053ee
--- /dev/null
+++ b/src/components/Outlet/Outlet.module.scss
@@ -0,0 +1,9 @@
+.outlet{
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 7.1rem);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
\ No newline at end of file
diff --git a/src/components/Outlet/Outlet.tsx b/src/components/Outlet/Outlet.tsx
new file mode 100644
index 0000000..30c55ac
--- /dev/null
+++ b/src/components/Outlet/Outlet.tsx
@@ -0,0 +1,19 @@
+import styles from './Outlet.module.scss'
+import {Tile} from '../index'
+const Outlet = () => {
+
+
+  return (
+    <div className={styles.outlet}>
+      {/* <pre style={{ whiteSpace: 'pre-wrap', background: '#eee', padding: '1rem' }}>
+        <code>{op2.raw}</code>
+      </pre> */}
+
+
+        {/* <Tile  styleSheet={op1} />  */}
+        {/* <Tile  styleSheet={op2} />  */}
+    </div>
+  )
+}
+
+export default Outlet
\ No newline at end of file
diff --git a/src/components/Tile/Tile.module.scss b/src/components/Tile/Tile.module.scss
new file mode 100644
index 0000000..ab07baf
--- /dev/null
+++ b/src/components/Tile/Tile.module.scss
@@ -0,0 +1,19 @@
+.tile {
+    min-width: 200px;
+    width: 33.33%;
+    height: 360px;
+    padding: 10px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ccc;
+    cursor: pointer;
+    transition: .2s linear;
+    &:nth-child(2n+1) {
+        background: rgba(0, 0, 0, .1);
+    }
+    &:hover {
+        background: rgba(0, 0, 0, .3);
+    }
+}
\ No newline at end of file
diff --git a/src/components/Tile/Tile.tsx b/src/components/Tile/Tile.tsx
new file mode 100644
index 0000000..7ce6a0a
--- /dev/null
+++ b/src/components/Tile/Tile.tsx
@@ -0,0 +1,16 @@
+import React, { FC } from 'react'
+import styles from './Tile.module.scss'
+
+interface TileProps {
+    styleSheet: CSSModuleClasses
+}
+
+const Tile: FC<TileProps> = ({styleSheet}) => {
+  return (
+    <div className={styles.tile}>
+        <span className={styleSheet.loader}></span>
+    </div>
+  )
+}
+
+export default Tile
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..555c0ed
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,6 @@
+import Footer from './Footer/Footer';
+import Header from './Header/Header';
+import Outlet from './Outlet/Outlet';
+import Tile from './Tile/Tile';
+
+export { Header , Footer , Outlet , Tile};
\ No newline at end of file
diff --git a/src/index.scss b/src/index.scss
new file mode 100644
index 0000000..822dfb5
--- /dev/null
+++ b/src/index.scss
@@ -0,0 +1,36 @@
+:root {
+  font-size: 16px;
+  --primary-color: #ff3d00;
+  --secondary-color: #FFF;
+  --body-color: #fff;
+  --body-bg: #263038;
+  --header-bg: #0d161b;
+  --footer-bg: #0d161b;
+  --footer-color: #ccc;
+}
+
+* , *::before , *::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+}
+
+body{
+  background-color: var(--body-bg);
+  color: var(--body-color);
+  font-family: 'Poppins', sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/src/loaders/index.ts b/src/loaders/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/loaders/stylesheets/anime/index.ts b/src/loaders/stylesheets/anime/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/loaders/stylesheets/circle/index.ts b/src/loaders/stylesheets/circle/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/loaders/stylesheets/circle/op1.module.css b/src/loaders/stylesheets/circle/op1.module.css
new file mode 100644
index 0000000..bc5cdda
--- /dev/null
+++ b/src/loaders/stylesheets/circle/op1.module.css
@@ -0,0 +1,20 @@
+.loader {
+    width: 48px;
+    height: 48px;
+    border: 5px solid #FFF;
+    border-bottom-color: #FF3D00;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file
diff --git a/src/loaders/stylesheets/dot/index.ts b/src/loaders/stylesheets/dot/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/loaders/stylesheets/index.ts b/src/loaders/stylesheets/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/loaders/stylesheets/objects/index.ts b/src/loaders/stylesheets/objects/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/loaders/stylesheets/progress/index.ts b/src/loaders/stylesheets/progress/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/loaders/stylesheets/rect/index.ts b/src/loaders/stylesheets/rect/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/loaders/stylesheets/skelton/index.ts b/src/loaders/stylesheets/skelton/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/loaders/stylesheets/spike/index.ts b/src/loaders/stylesheets/spike/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/loaders/stylesheets/text/index.ts b/src/loaders/stylesheets/text/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..46c0846
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.scss'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..358ca9b
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..db0becc
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..8b0f57b
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

From a064ab900ac904ca8ed6ea23ca6f7c800d7b26f7 Mon Sep 17 00:00:00 2001
From: "Vineeth.TR" <vineethtrv@gmail.com>
Date: Sat, 12 Jul 2025 20:48:46 +0530
Subject: [PATCH 2/4] feat: Add loaders and styles for circle animations;
 refactor Outlet and StyleLoader components

---
 src/components/Outlet/Outlet.module.css       |  9 +++
 src/components/Outlet/Outlet.module.scss      |  2 +-
 src/components/Outlet/Outlet.tsx              | 57 ++++++++++++++++---
 src/components/StyleLoader/StyleLoader.tsx    | 34 +++++++++++
 src/components/Tile/Tile.tsx                  |  5 +-
 src/components/index.ts                       |  3 +-
 src/loaders/{stylesheets => }/anime/index.ts  |  0
 .../circle1.module.css}                       |  0
 src/loaders/circle/circle2.module.css         | 20 +++++++
 src/loaders/circle/circle3.module.css         | 45 +++++++++++++++
 src/loaders/circle/circle4.module.css         | 48 ++++++++++++++++
 src/loaders/circle/circle5.module.css         | 49 ++++++++++++++++
 src/loaders/circle/index.ts                   | 15 +++++
 .../{stylesheets/circle => dot}/index.ts      |  0
 src/loaders/index.ts                          | 10 ++++
 .../{stylesheets/dot => objects}/index.ts     |  0
 .../{stylesheets => progress}/index.ts        |  0
 .../{stylesheets/objects => rect}/index.ts    |  0
 .../progress => skelton}/index.ts             |  0
 .../{stylesheets/rect => spike}/index.ts      |  0
 src/loaders/stylesheets/spike/index.ts        |  0
 src/loaders/stylesheets/text/index.ts         |  0
 .../{stylesheets/skelton => text}/index.ts    |  0
 23 files changed, 286 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Outlet/Outlet.module.css
 create mode 100644 src/components/StyleLoader/StyleLoader.tsx
 rename src/loaders/{stylesheets => }/anime/index.ts (100%)
 rename src/loaders/{stylesheets/circle/op1.module.css => circle/circle1.module.css} (100%)
 create mode 100644 src/loaders/circle/circle2.module.css
 create mode 100644 src/loaders/circle/circle3.module.css
 create mode 100644 src/loaders/circle/circle4.module.css
 create mode 100644 src/loaders/circle/circle5.module.css
 create mode 100644 src/loaders/circle/index.ts
 rename src/loaders/{stylesheets/circle => dot}/index.ts (100%)
 rename src/loaders/{stylesheets/dot => objects}/index.ts (100%)
 rename src/loaders/{stylesheets => progress}/index.ts (100%)
 rename src/loaders/{stylesheets/objects => rect}/index.ts (100%)
 rename src/loaders/{stylesheets/progress => skelton}/index.ts (100%)
 rename src/loaders/{stylesheets/rect => spike}/index.ts (100%)
 delete mode 100644 src/loaders/stylesheets/spike/index.ts
 delete mode 100644 src/loaders/stylesheets/text/index.ts
 rename src/loaders/{stylesheets/skelton => text}/index.ts (100%)

diff --git a/src/components/Outlet/Outlet.module.css b/src/components/Outlet/Outlet.module.css
new file mode 100644
index 0000000..45a2b77
--- /dev/null
+++ b/src/components/Outlet/Outlet.module.css
@@ -0,0 +1,9 @@
+.outlet {
+  position: relative;
+  width: 100%;
+  min-height: calc(100vh - 7.1rem);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
diff --git a/src/components/Outlet/Outlet.module.scss b/src/components/Outlet/Outlet.module.scss
index 38053ee..15c49ab 100644
--- a/src/components/Outlet/Outlet.module.scss
+++ b/src/components/Outlet/Outlet.module.scss
@@ -1,7 +1,7 @@
 .outlet{
     position: relative;
     width: 100%;
-    height: calc(100vh - 7.1rem);
+    min-height: calc(100vh - 7.1rem);
     display: flex;
     align-items: center;
     flex-wrap: wrap;
diff --git a/src/components/Outlet/Outlet.tsx b/src/components/Outlet/Outlet.tsx
index 30c55ac..177ab17 100644
--- a/src/components/Outlet/Outlet.tsx
+++ b/src/components/Outlet/Outlet.tsx
@@ -1,18 +1,61 @@
 import styles from './Outlet.module.scss'
-import {Tile} from '../index'
+import {StyleLoader} from '../index'
+import {LOADERS} from '../../loaders'
+import React, { useEffect, useState } from 'react'
+
+
+
+
+// import cssCode  from '../../loaders/circle/circle1.module.css?raw'
+
 const Outlet = () => {
 
 
+
+  return(
+    <div className={styles.outlet}>
+    {LOADERS.map((loader, i) => (
+      <React.Fragment key={i}>
+        {Array.from({ length: loader.length }).map((_, c) => (
+          <StyleLoader
+            key={`${loader.name}${c + 1}`}
+            folder={loader.name}
+            fileName={`${loader.name}${c + 1}`}
+          />
+        ))}
+      </React.Fragment>
+    ))}
+</div>
+
+  )
+
+
+  // console.log('loaders', loaders)
+
   return (
     <div className={styles.outlet}>
-      {/* <pre style={{ whiteSpace: 'pre-wrap', background: '#eee', padding: '1rem' }}>
-        <code>{op2.raw}</code>
-      </pre> */}
+      <span className={op2?.styles.loader}></span>
+
+      <pre>
+        <code>{op2?.raw}</code>
+      </pre>
+
+
 
+      {/* {LOADERS.map((loader, i) => (
+        <React.Fragment key={i}>
+          {loader.styleSheets.map((styleSheet, c) => (
+            <Tile
+              key={`${loader.name}${c}`}
+              cssString={styleSheet}
+            >
+              <Loader />
+            </Tile>
+          ))}
+        </React.Fragment>
+      ))} */}
+</div>
 
-        {/* <Tile  styleSheet={op1} />  */}
-        {/* <Tile  styleSheet={op2} />  */}
-    </div>
   )
 }
 
diff --git a/src/components/StyleLoader/StyleLoader.tsx b/src/components/StyleLoader/StyleLoader.tsx
new file mode 100644
index 0000000..36398c7
--- /dev/null
+++ b/src/components/StyleLoader/StyleLoader.tsx
@@ -0,0 +1,34 @@
+import { FC, useEffect, useState } from 'react'
+import Tile from '../Tile/Tile';
+
+async function loadCssModuleWithRaw(file: string) {
+    const [styles, raw] = await Promise.all([
+      import(`${file}`),
+      import(`${file}?raw`),
+    ]);
+  
+    return {
+      styles: styles.default,
+      raw: raw.default,
+    };
+  }
+  
+
+  interface Props {
+    folder: string;
+    fileName: string;
+  }
+
+
+const StyleLoader: FC<Props> = ({folder , fileName}) => {
+  const [styleSheet, setStyleSheet] = useState<{ styles: CSSModuleClasses; raw: string } | null>(null);
+  useEffect(() => {
+    loadCssModuleWithRaw(`../../loaders/${folder}/${fileName}.module.css`).then(setStyleSheet);
+  }, []);
+
+  if (!styleSheet) return null;
+
+  return <Tile styleSheet={styleSheet.styles} />
+}
+
+export default StyleLoader
\ No newline at end of file
diff --git a/src/components/Tile/Tile.tsx b/src/components/Tile/Tile.tsx
index 7ce6a0a..95fc58e 100644
--- a/src/components/Tile/Tile.tsx
+++ b/src/components/Tile/Tile.tsx
@@ -1,11 +1,12 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import styles from './Tile.module.scss'
 
 interface TileProps {
-    styleSheet: CSSModuleClasses
+  styleSheet: CSSModuleClasses
 }
 
 const Tile: FC<TileProps> = ({styleSheet}) => {
+
   return (
     <div className={styles.tile}>
         <span className={styleSheet.loader}></span>
diff --git a/src/components/index.ts b/src/components/index.ts
index 555c0ed..6a46285 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,7 @@
 import Footer from './Footer/Footer';
 import Header from './Header/Header';
 import Outlet from './Outlet/Outlet';
+import StyleLoader from './StyleLoader/StyleLoader';
 import Tile from './Tile/Tile';
 
-export { Header , Footer , Outlet , Tile};
\ No newline at end of file
+export { Header , Footer , Outlet , Tile , StyleLoader};
\ No newline at end of file
diff --git a/src/loaders/stylesheets/anime/index.ts b/src/loaders/anime/index.ts
similarity index 100%
rename from src/loaders/stylesheets/anime/index.ts
rename to src/loaders/anime/index.ts
diff --git a/src/loaders/stylesheets/circle/op1.module.css b/src/loaders/circle/circle1.module.css
similarity index 100%
rename from src/loaders/stylesheets/circle/op1.module.css
rename to src/loaders/circle/circle1.module.css
diff --git a/src/loaders/circle/circle2.module.css b/src/loaders/circle/circle2.module.css
new file mode 100644
index 0000000..97f3ddd
--- /dev/null
+++ b/src/loaders/circle/circle2.module.css
@@ -0,0 +1,20 @@
+.loader {
+    width: 48px;
+    height: 48px;
+    border: 5px solid #FFF;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file
diff --git a/src/loaders/circle/circle3.module.css b/src/loaders/circle/circle3.module.css
new file mode 100644
index 0000000..8d83fca
--- /dev/null
+++ b/src/loaders/circle/circle3.module.css
@@ -0,0 +1,45 @@
+.loader {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    position: relative;
+    animation: rotate 1s linear infinite
+}
+
+.loader::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0px;
+    border-radius: 50%;
+    border: 5px solid #FFF;
+    animation: prixClipFix 2s linear infinite;
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg)
+    }
+}
+
+@keyframes prixClipFix {
+    0% {
+        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
+    }
+
+    25% {
+        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
+    }
+
+    50% {
+        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
+    }
+
+    75% {
+        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
+    }
+
+    100% {
+        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
+    }
+}
diff --git a/src/loaders/circle/circle4.module.css b/src/loaders/circle/circle4.module.css
new file mode 100644
index 0000000..409a88b
--- /dev/null
+++ b/src/loaders/circle/circle4.module.css
@@ -0,0 +1,48 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite;
+}
+
+.loader::before,
+.loader::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 5px solid #fff;
+  animation: prixClipFix 2s linear infinite;
+}
+
+.loader::after {
+  transform: rotate3d(90, 90, 0, 180deg);
+  border-color: #ff3d00;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+
+  75%,
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+}
diff --git a/src/loaders/circle/circle5.module.css b/src/loaders/circle/circle5.module.css
new file mode 100644
index 0000000..294d8e9
--- /dev/null
+++ b/src/loaders/circle/circle5.module.css
@@ -0,0 +1,49 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite;
+}
+
+.loader::before,
+.loader::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 5px solid #fff;
+  animation: prixClipFix 2s linear infinite;
+}
+
+.loader::after {
+  inset: 8px;
+  transform: rotate3d(90, 90, 0, 180deg);
+  border-color: #ff3d00;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+
+  75%,
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+}
diff --git a/src/loaders/circle/index.ts b/src/loaders/circle/index.ts
new file mode 100644
index 0000000..fc726d9
--- /dev/null
+++ b/src/loaders/circle/index.ts
@@ -0,0 +1,15 @@
+import circle1 from './circle1.module.css?raw';
+import circle2 from './circle2.module.css?raw';
+import circle3 from './circle3.module.css?raw';
+import circle4 from './circle4.module.css?raw';
+import circle5 from './circle5.module.css?raw';
+
+
+
+export const circle = [
+    circle1,
+    circle2,
+    circle3,
+    circle4,
+    circle5
+]
\ No newline at end of file
diff --git a/src/loaders/stylesheets/circle/index.ts b/src/loaders/dot/index.ts
similarity index 100%
rename from src/loaders/stylesheets/circle/index.ts
rename to src/loaders/dot/index.ts
diff --git a/src/loaders/index.ts b/src/loaders/index.ts
index e69de29..4bccb86 100644
--- a/src/loaders/index.ts
+++ b/src/loaders/index.ts
@@ -0,0 +1,10 @@
+// import  { circle} from './circle';
+
+export const LOADERS = [
+    {
+        name: 'circle',
+        order: 1,
+        length: 5,
+        // styleSheets: circle
+    }
+]
\ No newline at end of file
diff --git a/src/loaders/stylesheets/dot/index.ts b/src/loaders/objects/index.ts
similarity index 100%
rename from src/loaders/stylesheets/dot/index.ts
rename to src/loaders/objects/index.ts
diff --git a/src/loaders/stylesheets/index.ts b/src/loaders/progress/index.ts
similarity index 100%
rename from src/loaders/stylesheets/index.ts
rename to src/loaders/progress/index.ts
diff --git a/src/loaders/stylesheets/objects/index.ts b/src/loaders/rect/index.ts
similarity index 100%
rename from src/loaders/stylesheets/objects/index.ts
rename to src/loaders/rect/index.ts
diff --git a/src/loaders/stylesheets/progress/index.ts b/src/loaders/skelton/index.ts
similarity index 100%
rename from src/loaders/stylesheets/progress/index.ts
rename to src/loaders/skelton/index.ts
diff --git a/src/loaders/stylesheets/rect/index.ts b/src/loaders/spike/index.ts
similarity index 100%
rename from src/loaders/stylesheets/rect/index.ts
rename to src/loaders/spike/index.ts
diff --git a/src/loaders/stylesheets/spike/index.ts b/src/loaders/stylesheets/spike/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/loaders/stylesheets/text/index.ts b/src/loaders/stylesheets/text/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/loaders/stylesheets/skelton/index.ts b/src/loaders/text/index.ts
similarity index 100%
rename from src/loaders/stylesheets/skelton/index.ts
rename to src/loaders/text/index.ts

From df1f6508d894c497bd27e6b8fd34118662678a8b Mon Sep 17 00:00:00 2001
From: "Vineeth.TR" <vineethtrv@gmail.com>
Date: Sun, 13 Jul 2025 13:25:25 +0530
Subject: [PATCH 3/4] refactor: Remove unused StyleLoader component and related
 styles; optimize Outlet component for dynamic style loading

---
 src/components/Footer/Footer.tsx           |  1 -
 src/components/Outlet/Outlet.module.css    |  9 ---
 src/components/Outlet/Outlet.tsx           | 80 +++++++---------------
 src/components/StyleLoader/StyleLoader.tsx | 34 ---------
 src/components/Tile/Tile.tsx               |  2 +-
 src/components/index.ts                    |  3 +-
 src/loaders/circle/index.ts                | 18 ++---
 src/loaders/index.ts                       | 16 ++---
 src/util/getDynamicStyle.ts                | 36 ++++++++++
 src/util/index.ts                          |  6 ++
 tsconfig.json                              | 11 ++-
 tsconfig.node.json                         |  1 +
 vite.config.ts                             | 15 ++++
 13 files changed, 106 insertions(+), 126 deletions(-)
 delete mode 100644 src/components/Outlet/Outlet.module.css
 delete mode 100644 src/components/StyleLoader/StyleLoader.tsx
 create mode 100644 src/util/getDynamicStyle.ts
 create mode 100644 src/util/index.ts

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 6c0f36c..5dd16c7 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styles from './Footer.module.scss';
 
 
diff --git a/src/components/Outlet/Outlet.module.css b/src/components/Outlet/Outlet.module.css
deleted file mode 100644
index 45a2b77..0000000
--- a/src/components/Outlet/Outlet.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.outlet {
-  position: relative;
-  width: 100%;
-  min-height: calc(100vh - 7.1rem);
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
diff --git a/src/components/Outlet/Outlet.tsx b/src/components/Outlet/Outlet.tsx
index 177ab17..ac739b7 100644
--- a/src/components/Outlet/Outlet.tsx
+++ b/src/components/Outlet/Outlet.tsx
@@ -1,62 +1,32 @@
-import styles from './Outlet.module.scss'
-import {StyleLoader} from '../index'
-import {LOADERS} from '../../loaders'
-import React, { useEffect, useState } from 'react'
-
-
-
-
-// import cssCode  from '../../loaders/circle/circle1.module.css?raw'
+import { Fragment, useEffect, useState } from "react";
+import styles from "./Outlet.module.scss";
+import { LOADERS } from "../../loaders";
+import { Tile } from "../index";
 
 const Outlet = () => {
-
-
-
-  return(
-    <div className={styles.outlet}>
-    {LOADERS.map((loader, i) => (
-      <React.Fragment key={i}>
-        {Array.from({ length: loader.length }).map((_, c) => (
-          <StyleLoader
-            key={`${loader.name}${c + 1}`}
-            folder={loader.name}
-            fileName={`${loader.name}${c + 1}`}
-          />
-        ))}
-      </React.Fragment>
-    ))}
-</div>
-
-  )
-
-
-  // console.log('loaders', loaders)
+  const [styleSheets, setStyleSheets] = useState<Record<string, any[]>>({});
+
+  useEffect(() => {
+    LOADERS.forEach(async (loader) => {
+      const styles = await loader.loadStyles();
+      setStyleSheets((prev) => ({
+        ...prev,
+        [loader.name]: styles,
+      }));
+    });
+  }, []);
 
   return (
     <div className={styles.outlet}>
-      <span className={op2?.styles.loader}></span>
-
-      <pre>
-        <code>{op2?.raw}</code>
-      </pre>
-
-
-
-      {/* {LOADERS.map((loader, i) => (
-        <React.Fragment key={i}>
-          {loader.styleSheets.map((styleSheet, c) => (
-            <Tile
-              key={`${loader.name}${c}`}
-              cssString={styleSheet}
-            >
-              <Loader />
-            </Tile>
+      {Object.keys(styleSheets).map((loaderName) => (
+        <Fragment key={loaderName}>
+          {styleSheets[loaderName].map((styleSheet, count) => (
+            <Tile key={loaderName + count} cssString={styleSheet.raw} styleSheet={styleSheet.styles} />
           ))}
-        </React.Fragment>
-      ))} */}
-</div>
-
-  )
-}
+        </Fragment>
+      ))}
+    </div>
+  );
+};
 
-export default Outlet
\ No newline at end of file
+export default Outlet;
diff --git a/src/components/StyleLoader/StyleLoader.tsx b/src/components/StyleLoader/StyleLoader.tsx
deleted file mode 100644
index 36398c7..0000000
--- a/src/components/StyleLoader/StyleLoader.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { FC, useEffect, useState } from 'react'
-import Tile from '../Tile/Tile';
-
-async function loadCssModuleWithRaw(file: string) {
-    const [styles, raw] = await Promise.all([
-      import(`${file}`),
-      import(`${file}?raw`),
-    ]);
-  
-    return {
-      styles: styles.default,
-      raw: raw.default,
-    };
-  }
-  
-
-  interface Props {
-    folder: string;
-    fileName: string;
-  }
-
-
-const StyleLoader: FC<Props> = ({folder , fileName}) => {
-  const [styleSheet, setStyleSheet] = useState<{ styles: CSSModuleClasses; raw: string } | null>(null);
-  useEffect(() => {
-    loadCssModuleWithRaw(`../../loaders/${folder}/${fileName}.module.css`).then(setStyleSheet);
-  }, []);
-
-  if (!styleSheet) return null;
-
-  return <Tile styleSheet={styleSheet.styles} />
-}
-
-export default StyleLoader
\ No newline at end of file
diff --git a/src/components/Tile/Tile.tsx b/src/components/Tile/Tile.tsx
index 95fc58e..202ed23 100644
--- a/src/components/Tile/Tile.tsx
+++ b/src/components/Tile/Tile.tsx
@@ -3,10 +3,10 @@ import styles from './Tile.module.scss'
 
 interface TileProps {
   styleSheet: CSSModuleClasses
+  cssString: string
 }
 
 const Tile: FC<TileProps> = ({styleSheet}) => {
-
   return (
     <div className={styles.tile}>
         <span className={styleSheet.loader}></span>
diff --git a/src/components/index.ts b/src/components/index.ts
index 6a46285..8f3dc5d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,7 +1,6 @@
 import Footer from './Footer/Footer';
 import Header from './Header/Header';
 import Outlet from './Outlet/Outlet';
-import StyleLoader from './StyleLoader/StyleLoader';
 import Tile from './Tile/Tile';
 
-export { Header , Footer , Outlet , Tile , StyleLoader};
\ No newline at end of file
+export { Header , Footer , Outlet , Tile };
\ No newline at end of file
diff --git a/src/loaders/circle/index.ts b/src/loaders/circle/index.ts
index fc726d9..02858d1 100644
--- a/src/loaders/circle/index.ts
+++ b/src/loaders/circle/index.ts
@@ -1,15 +1,5 @@
-import circle1 from './circle1.module.css?raw';
-import circle2 from './circle2.module.css?raw';
-import circle3 from './circle3.module.css?raw';
-import circle4 from './circle4.module.css?raw';
-import circle5 from './circle5.module.css?raw';
+import { getDynamicStyle } from "util";
+const styleModules = import.meta.glob('./*.module.css');
+const rawModules = import.meta.glob('./*.module.css', { as: 'raw' });
 
-
-
-export const circle = [
-    circle1,
-    circle2,
-    circle3,
-    circle4,
-    circle5
-]
\ No newline at end of file
+export const loadCircleStyles = getDynamicStyle(styleModules, rawModules);
\ No newline at end of file
diff --git a/src/loaders/index.ts b/src/loaders/index.ts
index 4bccb86..654f470 100644
--- a/src/loaders/index.ts
+++ b/src/loaders/index.ts
@@ -1,10 +1,8 @@
-// import  { circle} from './circle';
-
 export const LOADERS = [
-    {
-        name: 'circle',
-        order: 1,
-        length: 5,
-        // styleSheets: circle
-    }
-]
\ No newline at end of file
+  {
+    name: 'circle',
+    order: 1,
+    length: 5,
+    loadStyles: () => import('./circle').then(m => m.loadCircleStyles()),
+  },
+];
diff --git a/src/util/getDynamicStyle.ts b/src/util/getDynamicStyle.ts
new file mode 100644
index 0000000..b5b4bc2
--- /dev/null
+++ b/src/util/getDynamicStyle.ts
@@ -0,0 +1,36 @@
+export function getDynamicStyle(
+  styleModules: Record<string, () => Promise<unknown>>,
+  rawModules: Record<string, () => Promise<string>>
+) {
+//   const allStyles: { styles: CSSModuleClasses; raw: string }[] = [];
+
+  const loadStyleFiles = async () => {
+    const entries = Object.keys(styleModules)
+      .sort()
+      .map(async (path) => {
+        const [stylesMod, rawMod] = await Promise.all([
+          styleModules[path](),
+          rawModules[path](),
+        ]);
+
+        return {
+          styles: (stylesMod as { default: CSSModuleClasses }).default,
+          raw: rawMod,
+        };
+      });
+
+    const results = await Promise.all(entries);
+    return results;
+  };
+
+  return async function loadDynamicStyles() {
+      const allStyles: { styles: CSSModuleClasses; raw: string }[] = [];
+
+    if (allStyles.length === 0) {
+      const loaded = await loadStyleFiles();
+      allStyles.push(...loaded);
+      console.log('Circle styles loaded:', allStyles);
+    }
+    return allStyles;
+  };
+}
diff --git a/src/util/index.ts b/src/util/index.ts
new file mode 100644
index 0000000..c0d275b
--- /dev/null
+++ b/src/util/index.ts
@@ -0,0 +1,6 @@
+import { getDynamicStyle } from '../util/getDynamicStyle';
+
+export {
+    getDynamicStyle
+}
+
diff --git a/tsconfig.json b/tsconfig.json
index 1ffef60..472bf90 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,5 +3,14 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ]
+  ],
+  "compilerOptions": {
+    "types": ["node"],
+    "baseUrl": "src",
+    "paths": {
+      "util": ["util/index"],
+      "components": ["components/index"],
+      "*": ["*"]
+    }
+  }
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
index db0becc..048df62 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -4,6 +4,7 @@
     "target": "ES2022",
     "lib": ["ES2023"],
     "module": "ESNext",
+     "types": ["node"],
     "skipLibCheck": true,
 
     /* Bundler mode */
diff --git a/vite.config.ts b/vite.config.ts
index 8b0f57b..3a071fd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,22 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      'src': path.resolve(__dirname, 'src'),
+      'components': path.resolve(__dirname, 'src/components'),
+      'loaders': path.resolve(__dirname, 'src/loaders'),
+      'util': path.resolve(__dirname, './src/util'),
+    }
+  },
 })

From 64bd7c8f73614b9f2526088758cd4377d191d3c9 Mon Sep 17 00:00:00 2001
From: "Vineeth.TR" <vineethtrv@gmail.com>
Date: Sun, 27 Jul 2025 19:33:50 +0530
Subject: [PATCH 4/4] Add multiple circle loader styles and refactor loader
 imports

- Introduced 68 new CSS modules for various circle loader animations.
- Updated the index file to include a new bubble loader.
- Refactored dynamic style loading in getDynamicStyle utility.
- Cleaned up import statements in main.tsx for consistency.
- Removed the dot loader index file as it is no longer needed.
---
 .prettierignore                               |    3 +
 .prettierrc                                   |    7 +
 bash/circle.js                                | 1586 +++++++++++++++++
 bash/extract-css.sh                           |   39 +
 package-lock.json                             |  234 ++-
 package.json                                  |    5 +-
 src/App.tsx                                   |   13 +-
 src/components/Footer/Footer.tsx              |   15 +-
 src/components/Header/Header.tsx              |   26 +-
 src/components/Outlet/Outlet.tsx              |   28 +-
 src/components/Tile/Tile.tsx                  |   21 +-
 src/components/index.ts                       |    2 +-
 src/index.scss                                |    3 +
 src/loaders/anime/circle38.module.css         |   30 +
 src/loaders/bubble/bubble01.module.css        |   37 +
 src/loaders/bubble/bubble02.module.css        |   46 +
 src/loaders/bubble/bubble03.module.css        |   42 +
 src/loaders/bubble/bubble04.module.css        |   39 +
 src/loaders/bubble/bubble05.module.css        |   37 +
 src/loaders/bubble/bubble06.module.css        |   27 +
 src/loaders/bubble/bubble07.module.css        |   37 +
 src/loaders/bubble/bubble08.module.css        |   33 +
 src/loaders/bubble/bubble09.module.css        |   41 +
 src/loaders/bubble/bubble10.module.css        |   32 +
 src/loaders/bubble/bubble11.module.css        |   26 +
 src/loaders/bubble/bubble12.module.css        |   35 +
 src/loaders/bubble/bubble13.module.css        |   24 +
 src/loaders/bubble/bubble14.module.css        |   49 +
 src/loaders/bubble/bubble15.module.css        |   25 +
 src/loaders/bubble/bubble16.module.css        |   39 +
 src/loaders/bubble/bubble17.module.css        |   38 +
 src/loaders/bubble/bubble18.module.css        |   48 +
 src/loaders/bubble/bubble19.module.css        |   45 +
 src/loaders/bubble/bubble20.module.css        |   60 +
 src/loaders/bubble/bubble21.module.css        |   67 +
 src/loaders/bubble/bubble22.module.css        |   78 +
 src/loaders/bubble/bubble23.module.css        |   49 +
 src/loaders/bubble/bubble24.module.css        |   42 +
 src/loaders/bubble/bubble25.module.css        |   64 +
 src/loaders/bubble/bubble26.module.css        |   84 +
 src/loaders/bubble/bubble27.module.css        |   40 +
 src/loaders/bubble/bubble28.module.css        |   44 +
 src/loaders/bubble/bubble29.module.css        |   43 +
 src/loaders/bubble/bubble30.module.css        |   42 +
 src/loaders/bubble/bubble31.module.css        |   36 +
 src/loaders/bubble/bubble32.module.css        |   41 +
 src/loaders/bubble/bubble33.module.css        |   50 +
 src/loaders/bubble/bubble34.module.css        |   39 +
 src/loaders/bubble/bubble35.module.css        |   34 +
 src/loaders/bubble/bubble36.module.css        |   38 +
 src/loaders/bubble/bubble37.module.css        |   45 +
 src/loaders/bubble/index.ts                   |    5 +
 src/loaders/circle/circle01.module.css        |   19 +
 src/loaders/circle/circle02.module.css        |   19 +
 src/loaders/circle/circle03.module.css        |   40 +
 ...circle4.module.css => circle04.module.css} |    7 +-
 ...circle5.module.css => circle05.module.css} |    7 +-
 src/loaders/circle/circle06.module.css        |   51 +
 src/loaders/circle/circle07.module.css        |   32 +
 src/loaders/circle/circle08.module.css        |   32 +
 src/loaders/circle/circle09.module.css        |   32 +
 src/loaders/circle/circle1.module.css         |   20 -
 src/loaders/circle/circle10.module.css        |   32 +
 src/loaders/circle/circle11.module.css        |   39 +
 src/loaders/circle/circle12.module.css        |   37 +
 src/loaders/circle/circle13.module.css        |   31 +
 src/loaders/circle/circle14.module.css        |   30 +
 src/loaders/circle/circle15.module.css        |   46 +
 src/loaders/circle/circle16.module.css        |   53 +
 src/loaders/circle/circle17.module.css        |   45 +
 src/loaders/circle/circle18.module.css        |   30 +
 src/loaders/circle/circle19.module.css        |   44 +
 src/loaders/circle/circle2.module.css         |   20 -
 src/loaders/circle/circle20.module.css        |   33 +
 src/loaders/circle/circle21.module.css        |   19 +
 src/loaders/circle/circle22.module.css        |  103 ++
 src/loaders/circle/circle23.module.css        |  101 ++
 src/loaders/circle/circle24.module.css        |   76 +
 src/loaders/circle/circle25.module.css        |   30 +
 src/loaders/circle/circle26.module.css        |   72 +
 src/loaders/circle/circle27.module.css        |   19 +
 src/loaders/circle/circle28.module.css        |   30 +
 src/loaders/circle/circle29.module.css        |   31 +
 src/loaders/circle/circle3.module.css         |   45 -
 src/loaders/circle/circle30.module.css        |   19 +
 src/loaders/circle/circle31.module.css        |   21 +
 src/loaders/circle/circle32.module.css        |   24 +
 src/loaders/circle/circle33.module.css        |   36 +
 src/loaders/circle/circle34.module.css        |   34 +
 src/loaders/circle/circle35.module.css        |   38 +
 src/loaders/circle/circle36.module.css        |   30 +
 src/loaders/circle/circle37.module.css        |   31 +
 src/loaders/circle/circle38.module.css        |   30 +
 src/loaders/circle/circle39.module.css        |   31 +
 src/loaders/circle/circle40.module.css        |   20 +
 src/loaders/circle/circle41.module.css        |   33 +
 src/loaders/circle/circle42.module.css        |   34 +
 src/loaders/circle/circle43.module.css        |   56 +
 src/loaders/circle/circle44.module.css        |   66 +
 src/loaders/circle/circle45.module.css        |   45 +
 src/loaders/circle/circle46.module.css        |   46 +
 src/loaders/circle/circle47.module.css        |   40 +
 src/loaders/circle/circle48.module.css        |   53 +
 src/loaders/circle/circle49.module.css        |   27 +
 src/loaders/circle/circle50.module.css        |   30 +
 src/loaders/circle/circle51.module.css        |   17 +
 src/loaders/circle/circle52.module.css        |   36 +
 src/loaders/circle/circle53.module.css        |   29 +
 src/loaders/circle/circle54.module.css        |   30 +
 src/loaders/circle/circle55.module.css        |   35 +
 src/loaders/circle/circle56.module.css        |   18 +
 src/loaders/circle/circle57.module.css        |   31 +
 src/loaders/circle/circle58.module.css        |   24 +
 src/loaders/circle/circle59.module.css        |   41 +
 src/loaders/circle/circle60.module.css        |   33 +
 src/loaders/circle/circle61.module.css        |   22 +
 src/loaders/circle/circle62.module.css        |   24 +
 src/loaders/circle/circle63.module.css        |   34 +
 src/loaders/circle/circle64.module.css        |   32 +
 src/loaders/circle/circle65.module.css        |   31 +
 src/loaders/circle/circle66.module.css        |   28 +
 src/loaders/circle/circle67.module.css        |   29 +
 src/loaders/circle/circle68.module.css        |   49 +
 src/loaders/circle/index.ts                   |    4 +-
 src/loaders/dot/index.ts                      |    0
 src/loaders/index.ts                          |    8 +-
 src/main.tsx                                  |   12 +-
 src/util/getDynamicStyle.ts                   |   11 +-
 src/util/index.ts                             |    5 +-
 129 files changed, 5992 insertions(+), 173 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc
 create mode 100644 bash/circle.js
 create mode 100755 bash/extract-css.sh
 create mode 100644 src/loaders/anime/circle38.module.css
 create mode 100644 src/loaders/bubble/bubble01.module.css
 create mode 100644 src/loaders/bubble/bubble02.module.css
 create mode 100644 src/loaders/bubble/bubble03.module.css
 create mode 100644 src/loaders/bubble/bubble04.module.css
 create mode 100644 src/loaders/bubble/bubble05.module.css
 create mode 100644 src/loaders/bubble/bubble06.module.css
 create mode 100644 src/loaders/bubble/bubble07.module.css
 create mode 100644 src/loaders/bubble/bubble08.module.css
 create mode 100644 src/loaders/bubble/bubble09.module.css
 create mode 100644 src/loaders/bubble/bubble10.module.css
 create mode 100644 src/loaders/bubble/bubble11.module.css
 create mode 100644 src/loaders/bubble/bubble12.module.css
 create mode 100644 src/loaders/bubble/bubble13.module.css
 create mode 100644 src/loaders/bubble/bubble14.module.css
 create mode 100644 src/loaders/bubble/bubble15.module.css
 create mode 100644 src/loaders/bubble/bubble16.module.css
 create mode 100644 src/loaders/bubble/bubble17.module.css
 create mode 100644 src/loaders/bubble/bubble18.module.css
 create mode 100644 src/loaders/bubble/bubble19.module.css
 create mode 100644 src/loaders/bubble/bubble20.module.css
 create mode 100644 src/loaders/bubble/bubble21.module.css
 create mode 100644 src/loaders/bubble/bubble22.module.css
 create mode 100644 src/loaders/bubble/bubble23.module.css
 create mode 100644 src/loaders/bubble/bubble24.module.css
 create mode 100644 src/loaders/bubble/bubble25.module.css
 create mode 100644 src/loaders/bubble/bubble26.module.css
 create mode 100644 src/loaders/bubble/bubble27.module.css
 create mode 100644 src/loaders/bubble/bubble28.module.css
 create mode 100644 src/loaders/bubble/bubble29.module.css
 create mode 100644 src/loaders/bubble/bubble30.module.css
 create mode 100644 src/loaders/bubble/bubble31.module.css
 create mode 100644 src/loaders/bubble/bubble32.module.css
 create mode 100644 src/loaders/bubble/bubble33.module.css
 create mode 100644 src/loaders/bubble/bubble34.module.css
 create mode 100644 src/loaders/bubble/bubble35.module.css
 create mode 100644 src/loaders/bubble/bubble36.module.css
 create mode 100644 src/loaders/bubble/bubble37.module.css
 create mode 100644 src/loaders/bubble/index.ts
 create mode 100644 src/loaders/circle/circle01.module.css
 create mode 100644 src/loaders/circle/circle02.module.css
 create mode 100644 src/loaders/circle/circle03.module.css
 rename src/loaders/circle/{circle4.module.css => circle04.module.css} (97%)
 rename src/loaders/circle/{circle5.module.css => circle05.module.css} (97%)
 create mode 100644 src/loaders/circle/circle06.module.css
 create mode 100644 src/loaders/circle/circle07.module.css
 create mode 100644 src/loaders/circle/circle08.module.css
 create mode 100644 src/loaders/circle/circle09.module.css
 delete mode 100644 src/loaders/circle/circle1.module.css
 create mode 100644 src/loaders/circle/circle10.module.css
 create mode 100644 src/loaders/circle/circle11.module.css
 create mode 100644 src/loaders/circle/circle12.module.css
 create mode 100644 src/loaders/circle/circle13.module.css
 create mode 100644 src/loaders/circle/circle14.module.css
 create mode 100644 src/loaders/circle/circle15.module.css
 create mode 100644 src/loaders/circle/circle16.module.css
 create mode 100644 src/loaders/circle/circle17.module.css
 create mode 100644 src/loaders/circle/circle18.module.css
 create mode 100644 src/loaders/circle/circle19.module.css
 delete mode 100644 src/loaders/circle/circle2.module.css
 create mode 100644 src/loaders/circle/circle20.module.css
 create mode 100644 src/loaders/circle/circle21.module.css
 create mode 100644 src/loaders/circle/circle22.module.css
 create mode 100644 src/loaders/circle/circle23.module.css
 create mode 100644 src/loaders/circle/circle24.module.css
 create mode 100644 src/loaders/circle/circle25.module.css
 create mode 100644 src/loaders/circle/circle26.module.css
 create mode 100644 src/loaders/circle/circle27.module.css
 create mode 100644 src/loaders/circle/circle28.module.css
 create mode 100644 src/loaders/circle/circle29.module.css
 delete mode 100644 src/loaders/circle/circle3.module.css
 create mode 100644 src/loaders/circle/circle30.module.css
 create mode 100644 src/loaders/circle/circle31.module.css
 create mode 100644 src/loaders/circle/circle32.module.css
 create mode 100644 src/loaders/circle/circle33.module.css
 create mode 100644 src/loaders/circle/circle34.module.css
 create mode 100644 src/loaders/circle/circle35.module.css
 create mode 100644 src/loaders/circle/circle36.module.css
 create mode 100644 src/loaders/circle/circle37.module.css
 create mode 100644 src/loaders/circle/circle38.module.css
 create mode 100644 src/loaders/circle/circle39.module.css
 create mode 100644 src/loaders/circle/circle40.module.css
 create mode 100644 src/loaders/circle/circle41.module.css
 create mode 100644 src/loaders/circle/circle42.module.css
 create mode 100644 src/loaders/circle/circle43.module.css
 create mode 100644 src/loaders/circle/circle44.module.css
 create mode 100644 src/loaders/circle/circle45.module.css
 create mode 100644 src/loaders/circle/circle46.module.css
 create mode 100644 src/loaders/circle/circle47.module.css
 create mode 100644 src/loaders/circle/circle48.module.css
 create mode 100644 src/loaders/circle/circle49.module.css
 create mode 100644 src/loaders/circle/circle50.module.css
 create mode 100644 src/loaders/circle/circle51.module.css
 create mode 100644 src/loaders/circle/circle52.module.css
 create mode 100644 src/loaders/circle/circle53.module.css
 create mode 100644 src/loaders/circle/circle54.module.css
 create mode 100644 src/loaders/circle/circle55.module.css
 create mode 100644 src/loaders/circle/circle56.module.css
 create mode 100644 src/loaders/circle/circle57.module.css
 create mode 100644 src/loaders/circle/circle58.module.css
 create mode 100644 src/loaders/circle/circle59.module.css
 create mode 100644 src/loaders/circle/circle60.module.css
 create mode 100644 src/loaders/circle/circle61.module.css
 create mode 100644 src/loaders/circle/circle62.module.css
 create mode 100644 src/loaders/circle/circle63.module.css
 create mode 100644 src/loaders/circle/circle64.module.css
 create mode 100644 src/loaders/circle/circle65.module.css
 create mode 100644 src/loaders/circle/circle66.module.css
 create mode 100644 src/loaders/circle/circle67.module.css
 create mode 100644 src/loaders/circle/circle68.module.css
 delete mode 100644 src/loaders/dot/index.ts

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..63520da
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+build
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..91009f9
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100
+}
diff --git a/bash/circle.js b/bash/circle.js
new file mode 100644
index 0000000..880165c
--- /dev/null
+++ b/bash/circle.js
@@ -0,0 +1,1586 @@
+CIRCLE = [
+    {
+        id: "5s44kmptpx",
+        html: `<span class="loader"></span>`,
+        css: `.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: block;
+  margin:15px auto;
+  position: relative;
+  box-sizing: border-box;
+  animation: zeroRotation 1s linear infinite alternate;
+}
+.loader::after,
+.loader::before {
+  content: '';  
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #FF3D00;
+  width: 16px;
+  height: 16px;
+  transform: translate(-50%, 50%);
+  border-radius: 50%;
+}
+.loader::before {
+  left: auto;
+  right: 0;
+  transform: translate(50%, 100%);
+}
+
+@keyframes zeroRotation {
+  0% {
+    transform: scale(1) rotate(0deg);
+  }
+  100% {
+    transform: scale(0) rotate(360deg);
+  }
+} `,
+    }, {
+        id: "w216qsky6id",
+        html: `<span class="loader"></span>`,
+        css: `.loader {
+  width: 48px;
+  height: 48px;
+  display: block;
+  margin:15px auto;
+  position: relative;
+  color: #FFF;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after,
+.loader::before {
+  content: '';  
+  box-sizing: border-box;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 0;
+  background-color: #FFF;
+  border-radius: 50%;
+  animation: scale50 1s infinite ease-in-out;
+}
+.loader::before {
+  top: auto;
+  bottom: 0;
+  background-color: #FF3D00;
+  animation-delay: 0.5s;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+} 
+@keyframes scale50 {
+  0%, 100% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+  }
+} `,
+    }, {
+        id: "e53631pwlqi",
+        html: `<span class="loader"></span>`,
+        css: `.loader {
+  width: 48px;
+  height: 48px;
+  display: block;
+  margin:15px auto;
+  position: relative;
+  color: #FFF;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after,
+.loader::before {
+  content: '';  
+  box-sizing: border-box;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 50%;
+  left: 50%;
+  transform: scale(0.5) translate(0, 0);
+  background-color: #FFF;
+  border-radius: 50%;
+  animation: animloader 1s infinite ease-in-out;
+}
+.loader::before {
+  background-color: #FF3D00;
+  transform: scale(0.5) translate(-48px, -48px);
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+} 
+@keyframes animloader {
+    50% {
+      transform: scale(1) translate(-50%, -50%);
+}
+}
+    `,
+    },
+    
+  {
+    id: "prePresLding34",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+        position: relative;
+      }
+      .loader:before ,  .loader:after {
+          content: '';
+          width: 15px;
+          height: 15px;
+          display: block;
+          position: relative;
+          margin: 10px auto ;
+          border-radius: 50%;
+          background: #fff;
+          animation: left 1s infinite ease-in-out;
+        }
+        .loader:after {
+          background: #FF3D00;
+          animation: right 1s infinite ease-in-out;
+        }
+
+
+      @keyframes right {
+        0% , 100%{transform: translate(-15px) }
+        50% { transform: translate(15px) }
+      }
+
+      @keyframes left {
+        0% , 100%{ transform: translate(15px) }
+        50% { transform: translate(-15px) }
+      }
+
+      
+      `
+    },
+
+  {
+    id: "ball@2Xsn-1",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  box-sizing: border-box;
+  position: relative;
+  width: 48px;
+  height: 48px;
+  animation: flip 1s linear infinite;
+}
+.loader:after, .loader:before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  border-radius: 50%;
+  background: #FF3D00;
+  animation: spin 1s linear infinite;
+  transform-origin: 12px 100%;
+}
+.loader:before {
+  transform-origin: 0 50%;
+  background: #fff;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes flip {
+  0%, 50% {
+    transform: rotateY(0deg);
+  }
+  50%, 100% {
+    transform: rotateY(180deg);
+  }
+}
+    `
+    },
+
+
+  {
+    id: "ball@2Xsn-2",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  box-sizing: border-box;
+  position: relative;
+  width: 48px;
+  height: 48px;
+  animation: spin 1s linear infinite;
+}
+.loader:after, .loader:before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  border-radius: 50%;
+  background: #FF3D00;
+  animation: spin 1s linear infinite;
+  transform-origin: 0px 100%;
+}
+.loader:before {
+  transform-origin: 0 50%;
+  background: #fff;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+    `
+    },
+  {
+    id: "ball@2Xsn-3",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  box-sizing: border-box;
+  position: relative;
+  width: 48px;
+  height: 48px;
+  animation: spin 1s linear infinite;
+}
+.loader:after, .loader:before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  border-radius: 50%;
+  background: #FF3D00;
+  animation: flipY 1s linear infinite;
+  transform-origin: 50% 50%;
+}
+.loader:before {
+  transform-origin: 0% 100%;
+  background: #fff;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes flipY {
+  0%, 50% {
+    transform: rotateY(0deg);
+  }
+  50%, 100% {
+    transform: rotateY(180deg);
+  }
+}
+    `
+    },
+
+
+  {
+    id: "ball@2Xsn-4",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  width: calc(100px - 14px);
+  height: 50px;
+  position: relative;
+  animation: flippx 1s infinite linear;
+}
+.loader:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #FF3D00;
+  transform-origin: -14px 50%;
+  animation: spin 0.5s infinite linear;
+}
+@keyframes flippx {
+  0%, 49% {
+    transform: scaleX(1);
+  }
+  50%, 100% {
+    transform: scaleX(-1);
+  }
+}
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+    `
+    },
+  {
+    id: "msgerBblFdxbl",
+    html: `<span class="loader"></span>`,
+    css: `.loader, .loader:before, .loader:after {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  animation-fill-mode: both;
+  animation: bblFadInOut 1.8s infinite ease-in-out;
+}
+.loader {
+  color: #FFF;
+  font-size: 7px;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  animation-delay: -0.16s;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+.loader:before {
+  left: -3.5em;
+  animation-delay: -0.32s;
+}
+.loader:after {
+  left: 3.5em;
+}
+
+@keyframes bblFadInOut {
+  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
+  40% { box-shadow: 0 2.5em 0 0 }
+}
+    `
+    },
+  {
+    id: "msgerBblLdan3xbl",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: 32px 0 #fff, -32px 0 #fff;
+  position: relative;
+  animation: flash 0.5s ease-out infinite alternate;
+}
+
+@keyframes flash {
+  0% {
+    background-color: #FFF2;
+    box-shadow: 32px 0 #FFF2, -32px 0 #FFF;
+  }
+  50% {
+    background-color: #FFF;
+    box-shadow: 32px 0 #FFF2, -32px 0 #FFF2;
+  }
+  100% {
+    background-color: #FFF2;
+    box-shadow: 32px 0 #FFF, -32px 0 #FFF2;
+  }
+}
+      `
+    },
+    
+    
+    
+    
+    {
+        id: "qt4al5cwmmg",
+        html: `<span class="loader"></span>`,
+        css: `.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: block;
+  margin:15px auto;
+  position: relative;
+  background: #FFF;
+  box-sizing: border-box;
+  animation: shadowExpandX 2s linear infinite alternate;
+}
+
+@keyframes shadowExpandX {
+  0% {
+    box-shadow: 0 0, 0 0;
+    color: rgba(255, 255, 255, 0.2);
+  }
+  100% {
+    box-shadow: -24px 0, 24px 0;
+    color: rgba(255, 255, 255, 0.8);
+  }
+}`,
+    }, {
+        id: "1jxkx6vu7vj",
+        html: `<span class="loader"></span>`,
+        css: `.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: block;
+  margin:15px auto;
+  position: relative;
+  background: #FFF;
+  box-shadow: -24px 0 #FFF, 24px 0 #FFF;
+  box-sizing: border-box;
+  animation: shadowPulse 2s linear infinite;
+}
+
+@keyframes shadowPulse {
+  33% {
+    background: #FFF;
+    box-shadow: -24px 0 #FF3D00, 24px 0 #FFF;
+  }
+  66% {
+    background: #FF3D00;
+    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
+  }
+  100% {
+    background: #FFF;
+    box-shadow: -24px 0 #FFF, 24px 0 #FF3D00;
+  }
+}
+`,
+    }, {
+        id: "h36psmkc5la",
+        html: `<span class="loader"></span>`,
+        css: `.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: block;
+  margin:15px auto;
+  position: relative;
+  background: #FF3D00;
+  color: #FFF;
+  box-shadow: -24px 0, 24px 0;
+  box-sizing: border-box;
+  animation: rotation 2s ease-in-out infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+} 
+`,
+    },
+  {
+    id: "collution2BallJp1x",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  width: 82px;
+  height: 18px;
+  position: relative;
+}
+.loader::before , .loader::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translate(-50% , 10%);
+  top: 0;
+  background: #FF3D00;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  animation: jump 0.5s ease-in infinite alternate;
+}
+
+.loader::after {
+  background: #0000;
+  color: #fff;
+  top: 100%;
+  box-shadow: 32px -20px , -32px -20px;
+  animation: split 0.5s ease-out infinite alternate;
+}
+
+@keyframes split {
+  0% { box-shadow: 8px -20px, -8px -20px}
+  100% { box-shadow: 32px -20px , -32px -20px}
+}
+@keyframes jump {
+ 0% { transform: translate(-50% , -150%)}
+ 100% { transform: translate(-50% , 10%)}
+}
+`,
+    },
+
+  {
+    id: "bbl2xcrlrot",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #FF3D00;
+  position: relative;
+}
+.loader:before,
+.loader:after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  inset: 0;
+  background: #fff;
+  transform: rotate(0deg) translate(30px);
+  animation: rotate 1s ease infinite;
+}
+.loader:after {
+  animation-delay: 0.5s
+}
+@keyframes rotate {
+  100% {transform: rotate(360deg) translate(30px)
+}
+    `,
+    },
+    
+
+  {
+    id: "brb1xbeeMv",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  width: 64px;
+  height: 12px;
+  background:
+    radial-gradient(circle 6px, #FFF 100%, transparent 0),
+    radial-gradient(circle 6px, #FFF 100%, transparent 0);
+  background-size:12px 12px;
+  background-position: left center , right center ;
+  background-repeat: no-repeat;
+  position: relative;
+}
+.loader:before {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #FF3D00;
+  inset:0;
+  margin: auto;
+  animation: mvX 0.6s, mvY 0.3s;
+  animation-timing-function:cubic-bezier(.5,-300,.5, 300);
+  animation-iteration-count:infinite;
+}
+
+@keyframes mvX {
+    100% { left: 0.85px}
+}
+@keyframes mvY {
+    100% { top : 0.5px }
+}
+      `,
+    },
+    
+    
+    {
+        id: "b4bqez184d",
+        html: `<span class="loader"></span>`,
+        css: `.loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  margin:15px auto;
+  position: relative;
+  color: #FFF;
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite alternate;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow: -38px -6px, -14px 6px,  14px -6px;
+  }
+  33% {
+    box-shadow: -38px 6px, -14px -6px,  14px 6px;
+  }
+  66% {
+    box-shadow: -38px -6px, -14px 6px, 14px -6px;
+  }
+  100% {
+    box-shadow: -38px 6px, -14px -6px, 14px 6px;
+  }
+}`,
+    }, 
+  {
+    id: "bbl3xrnhit",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  width: 108px;
+  height: 16px;
+  background:
+    radial-gradient(circle 8px at 8px center, #FFF 100%, transparent 0),
+    radial-gradient(circle 8px at 8px center, #FFF 100%, transparent 0);
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+  position: relative;
+  animation: ballX 1s linear infinite;
+}
+.loader:before {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background:#FFF;
+  inset:0;
+  margin:auto;
+  animation: moveX 1s cubic-bezier(0.5,300,0.5,-300) infinite;
+}
+@keyframes ballX {
+  0%,25%,50%,75%, 100%  {background-position: 25% 0,75% 0}
+  40%     {background-position: 25% 0,85% 0}
+  90%     {background-position: 15% 0,75% 0}
+}
+@keyframes moveX {
+  100% {transform:translate(0.15px)}
+}
+  `,
+    }, 
+  {
+    id: "ball#flRbc",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+    position: relative;
+    width: 100px;
+    height: 16px;
+  }
+  .loader:before , .loader:after{
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 32px 0 #fff;
+    left: 0;
+    top: 0;
+    animation: ballMoveX 1s linear infinite;
+  }
+  .loader:after {
+    box-shadow: none;
+    transform-origin: 40px 0;
+    transform: rotate(-153deg);
+    animation: rotateLoader 1s linear infinite;
+  }
+
+  @keyframes rotateLoader {
+    0% , 10%{ transform: rotate(-153deg); }
+    90%, 100% { transform: rotate(0deg); }
+  }
+  @keyframes ballMoveX {
+    0% , 10%{  transform: translateX(0) }
+    90%, 100% { transform: translateX(32px) }
+  }
+      `,
+    },
+  {
+    id: "ballCrdLd",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  position: relative;
+  width: 100px;
+  height: 16px;
+}
+.loader:before , .loader:after{
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 32px 0 #fff;
+  left: 0;
+  top: 0;
+  animation: ballMoveX 2s linear infinite;
+}
+.loader:after {
+  box-shadow: none;
+  transform: translateX(64px) scale(1);
+  z-index: 2;
+  animation: none;
+  animation: trfLoader 2s linear infinite;
+}
+
+@keyframes trfLoader {
+  0% , 5%{
+    transform: translateX(64px) scale(1);
+    background: #FFF;
+  }
+  10%{
+    transform: translateX(64px) scale(1);
+    background: #ff3d00;
+  }
+  40%{
+      transform: translateX(32px) scale(1.5);
+      background: #ff3d00;
+    }
+  90%, 95% {
+    transform: translateX(0px) scale(1);
+    background: #ff3d00;
+  }
+  100% {
+    transform: translateX(0px) scale(1);
+    background: #FFF;
+  }
+}
+@keyframes ballMoveX {
+  0% , 10%{  transform: translateX(0) }
+  90%, 100% { transform: translateX(32px) }
+}
+      `,
+    },
+
+  {
+    id: "ball4puncUp",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+    animation: rotate 1s infinite;
+    height: 50px;
+    width: 50px;
+  }
+
+  .loader:before,
+  .loader:after {
+    border-radius: 50%;
+    content: "";
+    display: block;
+    height: 20px;
+    width: 20px;
+  }
+  .loader:before {
+    animation: ball1 1s infinite;
+    background-color: #fff;
+    box-shadow: 30px 0 0 #ff3d00;
+    margin-bottom: 10px;
+  }
+  .loader:after {
+    animation: ball2 1s infinite;
+    background-color: #ff3d00;
+    box-shadow: 30px 0 0 #fff;
+  }
+
+  @keyframes rotate {
+    0% { transform: rotate(0deg) scale(0.8) }
+    50% { transform: rotate(360deg) scale(1.2) }
+    100% { transform: rotate(720deg) scale(0.8) }
+  }
+
+  @keyframes ball1 {
+    0% {
+      box-shadow: 30px 0 0 #ff3d00;
+    }
+    50% {
+      box-shadow: 0 0 0 #ff3d00;
+      margin-bottom: 0;
+      transform: translate(15px, 15px);
+    }
+    100% {
+      box-shadow: 30px 0 0 #ff3d00;
+      margin-bottom: 10px;
+    }
+  }
+
+  @keyframes ball2 {
+    0% {
+      box-shadow: 30px 0 0 #fff;
+    }
+    50% {
+      box-shadow: 0 0 0 #fff;
+      margin-top: -20px;
+      transform: translate(15px, 15px);
+    }
+    100% {
+      box-shadow: 30px 0 0 #fff;
+      margin-top: 0;
+    }
+  }
+  `,
+    }, 
+
+
+
+    
+    {
+        id: "jk3s5paxg1",
+        html: `<span class="loader"></span>`,
+        css: `.loader {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: block;
+  margin:15px auto;
+  position: relative;
+  color: #FFF;
+  left: -100px;
+  box-sizing: border-box;
+  animation: shadowRolling 2s linear infinite;
+}
+
+@keyframes shadowRolling {
+  0% {
+    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  12% {
+    box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  25% {
+    box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  36% {
+    box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
+  }
+  62% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
+  }
+  75% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
+  }
+  87% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
+  }
+  100% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
+  }
+}`,
+    }, {
+        id: "v6gj5f7r1a",
+        html: `<span class="loader"></span>`,
+        css: `.loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  margin:15px auto;
+  position: relative;
+  color: #FFF;
+  box-sizing: border-box;
+  animation: animloader 2s linear infinite;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
+  }
+  25% {
+    box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 2px;
+  }
+  50% {
+    box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 2px,  -38px 0 0 -2px;
+  }
+  75% {
+    box-shadow: 14px 0 0 2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
+  }
+  100% {
+    box-shadow: 14px 0 0 -2px,  38px 0 0 2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
+  }
+}`,
+    },
+    
+    {
+        id: "mdqx53v2ufl",
+        html: `<span class="loader"></span>`,
+        css: `.loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  margin:15px auto;
+  position: relative;
+  color: #FFF;
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite alternate;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow: -38px -12px ,  -14px 0,  14px 0, 38px 0;
+  }
+  33% {
+    box-shadow: -38px 0px, -14px -12px,  14px 0, 38px 0;
+  }
+  66% {
+    box-shadow: -38px 0px , -14px 0, 14px -12px, 38px 0;
+  }
+  100% {
+    box-shadow: -38px 0 , -14px 0, 14px 0 , 38px -12px;
+  }
+}
+
+`,
+    },
+
+  {
+    id: "bbl4flowBrix",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  width: 16px;
+  height: 16px;
+  position: relative;
+  left: -32px;
+  border-radius: 50%;
+  color: #fff;
+  background: currentColor;
+  box-shadow: 32px 0 , -32px 0 ,  64px 0;
+}
+
+.loader::after {
+  content: '';
+  position: absolute;
+  left: -32px;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 10px;
+  background:#FF3D00;
+  animation: move 3s linear infinite alternate;
+}
+
+@keyframes move {
+  0% , 5%{
+    left: -32px;
+    width: 16px;
+  }
+  15% , 20%{
+    left: -32px;
+    width: 48px;
+  }
+  30% , 35%{
+    left: 0px;
+    width: 16px;
+  }
+  45% , 50%{
+    left: 0px;
+    width: 48px;
+  }
+  60% , 65%{
+    left: 32px;
+    width: 16px;
+  }
+
+  75% , 80% {
+    left: 32px;
+    width: 48px;
+  }
+  95%, 100% {
+    left: 64px;
+    width: 16px;
+  }
+`,
+    },
+
+  {
+    id: "ntonPend5Xbal",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: 32px 0 #fff, -32px 0 #fff;
+  position: relative;
+  animation: flash 0.3s ease-in infinite alternate;
+}
+.loader::before , .loader::after {
+  content: '';
+  position: absolute;
+  left: -64px;
+  top: 0;
+  background: #FFF;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  transform-origin: 35px -35px;
+  transform: rotate(45deg);
+  animation: hitL 0.3s ease-in infinite alternate;
+}
+
+.loader::after {
+  left: 64px;
+  transform: rotate(-45deg);
+  transform-origin: -35px -35px;
+  animation: hitR 0.3s ease-out infinite alternate;
+}
+
+@keyframes flash {
+  0%  , 100%{
+    background-color: rgba(255, 255, 255, 0.25);
+    box-shadow: 32px 0 rgba(255, 255, 255, 0.25), -32px 0 rgba(255, 255, 255, 0.25);
+  }
+  25% {
+    background-color: rgba(255, 255, 255, 0.25);
+    box-shadow: 32px 0 rgba(255, 255, 255, 0.25), -32px 0 rgba(255, 255, 255, 1);
+  }
+  50% {
+    background-color: rgba(255, 255, 255, 1);
+    box-shadow: 32px 0 rgba(255, 255, 255, 0.25), -32px 0 rgba(255, 255, 255, 0.25);
+  }
+  75% {
+    background-color: rgba(255, 255, 255, 0.25);
+    box-shadow: 32px 0 rgba(255, 255, 255, 1), -32px 0 rgba(255, 255, 255, 0.25);
+  }
+}
+
+@keyframes hitL {
+ 0% {
+   transform: rotate(45deg);
+   background-color: rgba(255, 255, 255, 1);
+  }
+25% , 100% {
+   transform: rotate(0deg);
+  background-color: rgba(255, 255, 255, 0.25);
+  }
+}
+
+@keyframes hitR {
+ 0% , 75% {
+   transform: rotate(0deg);
+   background-color: rgba(255, 255, 255, 0.25);
+  }
+ 100% {
+   transform: rotate(-45deg);
+  background-color: rgba(255, 255, 255, 1);
+  }
+}
+`,
+    },
+  {
+    id: "cyclo5xballx",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+        position: relative;
+  width: 15px;
+  height: 64px;
+}
+.loader::after , .loader::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #fff;
+  background: currentColor;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  box-shadow: 45px 0 , -45px 0;
+  animation: move 0.5s linear infinite alternate;
+}
+
+.loader::before {
+  top: 100%;
+  box-shadow: 50px 0 ;
+  left: -25px;
+  animation-direction: alternate-reverse;
+}
+
+@keyframes move {
+  0% { top: 0 }
+  50% { top: 50% }
+  100% { top: 100% }
+}`,
+    },
+
+
+
+
+    {
+        id: "bbleHrSpinShdw34f",
+        html: `<span class="loader"></span>`,
+        css: `.loader {
+          position: relative;
+          display: flex;
+        }
+        .loader:before , .loader:after {
+            content: '';
+            width: 15px;
+            height: 15px;
+            display: inline-block;
+            position: relative;
+            margin: 0  5px  ;
+            border-radius: 50%;
+            color: #FFF;
+            background: currentColor;
+            box-shadow: 50px 0 ,  -50px 0;
+            animation: left 1s infinite ease-in-out;
+          }
+          .loader:after {
+            color: #FF3D00;
+            animation: right 1.1s infinite ease-in-out;
+          }
+
+
+        @keyframes right {
+          0% , 100%{transform: translateY(-10px) }
+          50% { transform: translateY(10px) }
+        }
+
+        @keyframes left {
+          0% , 100%{ transform: translateY(10px) }
+          50% { transform: translateY(-10px) }
+        }
+`,
+    },
+    {
+        id: "bbleVrncgShdw34f",
+        html: `<span class="loader"></span>`,
+        css: `.loader {
+            height: 150px;
+            position: relative;
+          }
+          .loader:before , .loader:after {
+              content: '';
+              width: 15px;
+              height: 15px;
+              display: block;
+              position: relative;
+              margin: 10px auto ;
+              border-radius: 50%;
+              color: #FFF;
+              background: currentColor;
+              box-shadow: 0 50px , 0 100px;
+              animation: left 1s infinite ease-in-out;
+            }
+            .loader:after {
+              animation: right 1.1s infinite ease-in-out;
+            }
+
+
+          @keyframes right {
+            0% , 100%{transform: translate(-15px) }
+            50% { transform: translate(15px) }
+          }
+
+          @keyframes left {
+            0% , 100%{ transform: translate(15px) }
+            50% { transform: translate(-15px) }
+          }
+        `,
+    },
+
+    // 77
+
+
+
+{
+
+  id: "ranDrpBblHrflx",
+  html: `<span class="loader"></span>`,
+  css: `.loader {
+    width: 32px;
+    height: 32px;
+    transform: translateY(100%);
+    border-radius: 50%;
+    background: #FFF;
+    position: relative;
+  }
+
+  .loader:before,
+  .loader:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: #FFF;
+    left: 50%;
+    transform: translateX(-50%);
+    top: -200%;
+  }
+
+  .loader:after {
+    animation: moveX 0.5s infinite linear alternate;
+  }
+
+  @keyframes moveX {
+    0% {
+      top: 0%;
+      transform: translateX(-50%) scale(1.5);
+    }
+
+    50% {
+      top: -75%;
+      transform: translateX(-50%) scale(0.5);
+    }
+
+    100% {
+      top: -200%;
+      transform: translateX(-50%) scale(1.5);
+    }
+  }
+
+  `,
+}
+
+,
+{
+
+  id: "doduSpiBablFil",
+  html: `<span class="loader"></span>`,
+  css: `.loader {
+    width: 32px;
+    height: 32px;
+    position: relative;
+    border-radius: 50%;
+    color: #FF3D00;
+    animation: fill 1s ease-in infinite alternate;
+  }
+
+  .loader::before,
+  .loader::after {
+    content: '';
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+    left: 48px;
+    top: 0;
+    animation: fill 0.9s ease-in infinite alternate;
+  }
+
+  .loader::after {
+    left: auto;
+    right: 48px;
+    animation-duration: 1.1s;
+  }
+
+  @keyframes fill {
+    0% {
+      box-shadow: 0 0 0 2px inset
+    }
+
+    100% {
+      box-shadow: 0 0 0 10px inset
+    }
+  }
+
+  `,
+}
+
+,
+
+
+
+{
+
+id: "im0eqyxwqhs",
+html: `<span class="loader"></span>`,
+css: `.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+.loader::after,
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #FF3D00;
+  width: 16px;
+  height: 16px;
+  transform: translate(-50%, 50%);
+  border-radius: 50%;
+}
+
+.loader::before {
+  left: auto;
+  right: 0;
+  background: #FFF;
+  transform: translate(50%, 100%);
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+`,
+},
+
+{
+
+  id: "clircleSpderX3",
+  html: `<span class="loader"></span>`,
+  css: `.loader {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    position: relative;
+    background: rgba(255, 255, 255, 0.8);
+  }
+
+  .loader:before,
+  .loader:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    background: #FFF;
+    animation: slide 1s infinite linear alternate;
+    opacity: 0.5;
+  }
+
+  .loader:after {
+    animation: slide2 1s infinite linear alternate;
+    opacity: 1;
+
+  }
+
+  @keyframes slide {
+
+    0%,
+    20% {
+      transform: translate(0, 0)
+    }
+
+    80%,
+    100% {
+      transform: translate(15px, 15px)
+    }
+  }
+
+  @keyframes slide2 {
+
+    0%,
+    20% {
+      transform: translate(0, 0)
+    }
+
+    80%,
+    100% {
+      transform: translate(-15px, -15px)
+    }
+  }
+
+  `,
+}
+,
+{
+
+  id: "bbl2TrnsSpltMv",
+  html: `<span class="loader"></span>`,
+  css: `.loader {
+    width: 64px;
+    height: 48px;
+    position: relative;
+    animation: split 1s ease-in infinite alternate;
+  }
+
+  .loader::before,
+  .loader::after {
+    content: '';
+    position: absolute;
+    height: 48px;
+    width: 48px;
+    border-radius: 50%;
+    left: 0;
+    top: 0;
+    transform: translateX(-10px);
+    background: #FF3D00;
+    opacity: 0.75;
+    backdrop-filter: blur(20px);
+  }
+
+  .loader::after {
+    left: auto;
+    right: 0;
+    background: #FFF;
+    transform: translateX(10px);
+  }
+
+  @keyframes split {
+
+    0%,
+    25% {
+      width: 64px
+    }
+
+    100% {
+      width: 148px
+    }
+  }
+
+  `,
+}
+
+,
+
+
+{
+
+id: "bbule2pUshpPlusering",
+html: `<span class="loader"></span>`,
+css: `.loader {
+  width: 84px;
+  height: 84px;
+  position: relative;
+}
+
+.loader:before,
+.loader:after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: #FFF;
+  transform: translate(-50%, -100%) scale(0);
+  animation: push 2s infinite linear;
+}
+
+.loader:after {
+  animation-delay: 1s;
+}
+
+@keyframes push {
+
+  0%,
+  50% {
+    transform: translate(-50%, 0%) scale(1)
+  }
+
+  100% {
+    transform: translate(-50%, -100%) scale(0)
+  }
+}
+
+`,
+}
+
+,
+
+{
+
+id: "bubblePushBack2ls",
+html: `<span class="loader"></span>`,
+css: `.loader {
+  width: 84px;
+  height: 84px;
+  position: relative;
+}
+
+.loader:before,
+.loader:after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 84px;
+  height: 84px;
+  border-radius: 50%;
+  background: #FF3D00;
+  animation: push 1s infinite linear alternate;
+}
+
+.loader:after {
+  top: auto;
+  bottom: 0;
+  left: 0;
+  background: #fff;
+  animation-direction: alternate-reverse;
+}
+
+@keyframes push {
+  0% {
+    width: 14px;
+    height: 14px;
+  }
+
+  100% {
+    width: 84px;
+    height: 84px;
+  }
+}
+
+`,
+}
+
+,
+{
+
+id: "userPushBackCrl",
+html: `<span class="loader"></span>`,
+css: `.loader {
+  width: 84px;
+  height: 84px;
+  position: relative;
+  overflow: hidden;
+}
+
+.loader:before,
+.loader:after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: #FFF;
+  transform: translate(-50%, 100%) scale(0);
+  animation: push 2s infinite ease-in;
+}
+
+.loader:after {
+  animation-delay: 1s;
+}
+
+@keyframes push {
+  0% {
+    transform: translate(-50%, 100%) scale(1);
+  }
+
+  15%,
+  25% {
+    transform: translate(-50%, 50%) scale(1);
+  }
+
+  50%,
+  75% {
+    transform: translate(-50%, -30%) scale(0.5);
+  }
+
+  80%,
+  100% {
+    transform: translate(-50%, -50%) scale(0);
+  }
+}
+
+`,
+}
+
+,
+
+    
+]
\ No newline at end of file
diff --git a/bash/extract-css.sh b/bash/extract-css.sh
new file mode 100755
index 0000000..0be10bf
--- /dev/null
+++ b/bash/extract-css.sh
@@ -0,0 +1,39 @@
+#!/bin/bash
+
+INPUT_FILE="circle.js"
+OUTPUT_PREFIX="circle"
+
+node - <<'EOF'
+const fs = require('fs');
+const vm = require('vm');
+
+const filePath = "circle.js";
+let content = fs.readFileSync(filePath, "utf-8");
+
+// Remove the ES module `export` so we can evaluate as CommonJS
+content = content.replace(/export\s+const\s+CIRCLE/, 'const CIRCLE');
+
+const sandbox = {};
+try {
+  // Evaluate the JS code in a safe, isolated context
+  vm.runInNewContext(content, sandbox);
+
+  if (!Array.isArray(sandbox.CIRCLE)) {
+    console.error("❌ CIRCLE is not defined as an array.");
+    console.log("🔍 Sandbox keys:", Object.keys(sandbox));
+    process.exit(1);
+  }
+
+  sandbox.CIRCLE.forEach((item, index) => {
+    const css = item.css?.trim();
+    if (!css) return;
+    const nameNumber = index + 1 > 9 ? index + 1 : `0${index + 1}`;
+    const fileName = `bubble${nameNumber}.module.css`;
+    fs.writeFileSync(fileName, css + "\n");
+    console.log(`✅ Generated: ${fileName}`);
+  });
+} catch (err) {
+  console.error("❌ JS Evaluation Error:", err.message);
+  process.exit(1);
+}
+EOF
diff --git a/package-lock.json b/package-lock.json
index 78442ee..8f9176a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,11 +15,13 @@
         "@eslint/js": "^9.21.0",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
+        "@typescript-eslint/parser": "^8.38.0",
         "@vitejs/plugin-react": "^4.3.4",
         "eslint": "^9.21.0",
         "eslint-plugin-react-hooks": "^5.1.0",
         "eslint-plugin-react-refresh": "^0.4.19",
         "globals": "^15.15.0",
+        "prettier": "^3.6.2",
         "sass": "^1.86.3",
         "typescript": "~5.7.2",
         "typescript-eslint": "^8.24.1",
@@ -1768,16 +1770,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.29.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.29.0.tgz",
-      "integrity": "sha512-8C0+jlNJOwQso2GapCVWWfW/rzaq7Lbme+vGUFKE31djwNncIpgXD7Cd4weEsDdkoZDjH0lwwr3QDQFuyrMg9g==",
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.38.0.tgz",
+      "integrity": "sha512-Zhy8HCvBUEfBECzIl1PKqF4p11+d0aUJS1GeUiuqK9WmOug8YCmC4h4bjyBvMyAMI9sbRczmrYL5lKg/YMbrcQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.29.0",
-        "@typescript-eslint/types": "8.29.0",
-        "@typescript-eslint/typescript-estree": "8.29.0",
-        "@typescript-eslint/visitor-keys": "8.29.0",
+        "@typescript-eslint/scope-manager": "8.38.0",
+        "@typescript-eslint/types": "8.38.0",
+        "@typescript-eslint/typescript-estree": "8.38.0",
+        "@typescript-eslint/visitor-keys": "8.38.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1792,6 +1794,160 @@
         "typescript": ">=4.8.4 <5.9.0"
       }
     },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.38.0.tgz",
+      "integrity": "sha512-WJw3AVlFFcdT9Ri1xs/lg8LwDqgekWXWhH3iAF+1ZM+QPd7oxQ6jvtW/JPwzAScxitILUIFs0/AnQ/UWHzbATQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.38.0",
+        "@typescript-eslint/visitor-keys": "8.38.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.38.0.tgz",
+      "integrity": "sha512-wzkUfX3plUqij4YwWaJyqhiPE5UCRVlFpKn1oCRn2O1bJ592XxWJj8ROQ3JD5MYXLORW84063z3tZTb/cs4Tyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.38.0.tgz",
+      "integrity": "sha512-fooELKcAKzxux6fA6pxOflpNS0jc+nOQEEOipXFNjSlBS6fqrJOVY/whSn70SScHrcJ2LDsxWrneFoWYSVfqhQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.38.0",
+        "@typescript-eslint/tsconfig-utils": "8.38.0",
+        "@typescript-eslint/types": "8.38.0",
+        "@typescript-eslint/visitor-keys": "8.38.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.38.0.tgz",
+      "integrity": "sha512-pWrTcoFNWuwHlA9CvlfSsGWs14JxfN1TH25zM5L7o0pRLhsoZkDnTsXfQRJBEWJoV5DL0jf+Z+sxiud+K0mq1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.38.0",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.38.0.tgz",
+      "integrity": "sha512-dbK7Jvqcb8c9QfH01YB6pORpqX1mn5gDZc9n63Ak/+jD67oWXn3Gs0M6vddAN+eDXBCS5EmNWzbSxsn9SzFWWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.38.0",
+        "@typescript-eslint/types": "^8.38.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service/node_modules/@typescript-eslint/types": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.38.0.tgz",
+      "integrity": "sha512-wzkUfX3plUqij4YwWaJyqhiPE5UCRVlFpKn1oCRn2O1bJ592XxWJj8ROQ3JD5MYXLORW84063z3tZTb/cs4Tyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
     "node_modules/@typescript-eslint/scope-manager": {
       "version": "8.29.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.29.0.tgz",
@@ -1810,6 +1966,23 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.38.0.tgz",
+      "integrity": "sha512-Lum9RtSE3EroKk/bYns+sPOodqb2Fv50XOl/gMviMKNvanETUuUcC9ObRbzrJ4VSd2JalPqgSAavwrPiPvnAiQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
     "node_modules/@typescript-eslint/type-utils": {
       "version": "8.29.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.29.0.tgz",
@@ -2435,9 +2608,9 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -3139,6 +3312,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3472,6 +3661,31 @@
         "typescript": ">=4.8.4 <5.9.0"
       }
     },
+    "node_modules/typescript-eslint/node_modules/@typescript-eslint/parser": {
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.29.0.tgz",
+      "integrity": "sha512-8C0+jlNJOwQso2GapCVWWfW/rzaq7Lbme+vGUFKE31djwNncIpgXD7Cd4weEsDdkoZDjH0lwwr3QDQFuyrMg9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.29.0",
+        "@typescript-eslint/types": "8.29.0",
+        "@typescript-eslint/typescript-estree": "8.29.0",
+        "@typescript-eslint/visitor-keys": "8.29.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
diff --git a/package.json b/package.json
index 521319f..bc8d975 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "prettier --write \"src/**/*.{js,ts,jsx,tsx,json,css,md}\""
   },
   "dependencies": {
     "react": "^19.0.0",
@@ -17,11 +18,13 @@
     "@eslint/js": "^9.21.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
+    "@typescript-eslint/parser": "^8.38.0",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
+    "prettier": "^3.6.2",
     "sass": "^1.86.3",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
diff --git a/src/App.tsx b/src/App.tsx
index 8a49e8b..7305dd3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,14 @@
-import './App.scss'
-import { Header , Footer, Outlet } from './components'
+import './App.scss';
+import { Header, Footer, Outlet } from './components';
 
 function App() {
-
   return (
     <>
       <Header />
-        <Outlet />
-      <Footer/>
+      <Outlet />
+      <Footer />
     </>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 5dd16c7..c1f3f76 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,15 +1,14 @@
 import styles from './Footer.module.scss';
 
-
 const Footer = () => {
   return (
     <footer className={styles.footer}>
-        <a href="https://vineethtrv.github.io/" target="_blank" >
-            <span>👨&zwj;💻</span>
-            Vineeth TR
-        </a>
+      <a href="https://vineethtrv.github.io/" target="_blank">
+        <span>👨&zwj;💻</span>
+        Vineeth TR
+      </a>
     </footer>
-  )
-}
+  );
+};
 
-export default Footer
\ No newline at end of file
+export default Footer;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d457822..34c7a21 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -3,17 +3,25 @@ import styles from './Header.module.scss';
 import codepen from '/images/codepen.png';
 import github from '/images/github.png';
 
-const Header : React.FC = () => {
+const Header: React.FC = () => {
   return (
     <header className={styles.header}>
-        <span className={styles.header_brand}>L &nbsp; aders</span>
+      <span className={styles.header_brand}>L &nbsp; aders</span>
 
-        <nav>
-            <a target="_blank" style={{backgroundImage: `url(${codepen})`}} href="https://codepen.io/vineethtrv/pen/NWxZqMM"></a>
-            <a target="_blank" style={{backgroundImage: `url(${github})`}} href="https://github.com/vineethtrv/css-loader"></a>
-        </nav>
+      <nav>
+        <a
+          target="_blank"
+          style={{ backgroundImage: `url(${codepen})` }}
+          href="https://codepen.io/vineethtrv/pen/NWxZqMM"
+        ></a>
+        <a
+          target="_blank"
+          style={{ backgroundImage: `url(${github})` }}
+          href="https://github.com/vineethtrv/css-loader"
+        ></a>
+      </nav>
     </header>
-  )
-}
+  );
+};
 
-export default Header
\ No newline at end of file
+export default Header;
diff --git a/src/components/Outlet/Outlet.tsx b/src/components/Outlet/Outlet.tsx
index ac739b7..84499de 100644
--- a/src/components/Outlet/Outlet.tsx
+++ b/src/components/Outlet/Outlet.tsx
@@ -1,10 +1,15 @@
-import { Fragment, useEffect, useState } from "react";
-import styles from "./Outlet.module.scss";
-import { LOADERS } from "../../loaders";
-import { Tile } from "../index";
+import { Fragment, useEffect, useState } from 'react';
+import styles from './Outlet.module.scss';
+import { LOADERS } from '../../loaders';
+import { Tile } from '../index';
+export interface Loaders {
+  styles: any;
+  raw: string;
+  fileName: string;
+}
 
 const Outlet = () => {
-  const [styleSheets, setStyleSheets] = useState<Record<string, any[]>>({});
+  const [styleSheets, setStyleSheets] = useState<Record<string, Loaders[]>>({});
 
   useEffect(() => {
     LOADERS.forEach(async (loader) => {
@@ -20,9 +25,16 @@ const Outlet = () => {
     <div className={styles.outlet}>
       {Object.keys(styleSheets).map((loaderName) => (
         <Fragment key={loaderName}>
-          {styleSheets[loaderName].map((styleSheet, count) => (
-            <Tile key={loaderName + count} cssString={styleSheet.raw} styleSheet={styleSheet.styles} />
-          ))}
+          {styleSheets[loaderName]
+            .sort((a, b) => a.fileName.localeCompare(b.fileName))
+            .map((styleSheet, count) => (
+              <Tile
+                key={loaderName + count}
+                filename={styleSheet.fileName}
+                cssString={styleSheet.raw}
+                styleSheet={styleSheet.styles}
+              />
+            ))}
         </Fragment>
       ))}
     </div>
diff --git a/src/components/Tile/Tile.tsx b/src/components/Tile/Tile.tsx
index 202ed23..24df646 100644
--- a/src/components/Tile/Tile.tsx
+++ b/src/components/Tile/Tile.tsx
@@ -1,17 +1,18 @@
-import { FC } from 'react'
-import styles from './Tile.module.scss'
+import { FC } from 'react';
+import styles from './Tile.module.scss';
 
 interface TileProps {
-  styleSheet: CSSModuleClasses
-  cssString: string
+  styleSheet: CSSModuleClasses;
+  cssString: string;
+  filename: string;
 }
 
-const Tile: FC<TileProps> = ({styleSheet}) => {
+const Tile: FC<TileProps> = ({ styleSheet, filename }) => {
   return (
-    <div className={styles.tile}>
-        <span className={styleSheet.loader}></span>
+    <div className={styles.tile} data-ref={filename.replace(/\.module\.css$/, '')}>
+      <span className={styleSheet.loader}></span>
     </div>
-  )
-}
+  );
+};
 
-export default Tile
\ No newline at end of file
+export default Tile;
diff --git a/src/components/index.ts b/src/components/index.ts
index 8f3dc5d..f5f36e9 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,4 +3,4 @@ import Header from './Header/Header';
 import Outlet from './Outlet/Outlet';
 import Tile from './Tile/Tile';
 
-export { Header , Footer , Outlet , Tile };
\ No newline at end of file
+export { Header, Footer, Outlet, Tile };
diff --git a/src/index.scss b/src/index.scss
index 822dfb5..16b6892 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -34,3 +34,6 @@ body{
   -webkit-text-size-adjust: 100%;
 }
 
+.abs{
+  position: absolute;
+}
\ No newline at end of file
diff --git a/src/loaders/anime/circle38.module.css b/src/loaders/anime/circle38.module.css
new file mode 100644
index 0000000..6b72610
--- /dev/null
+++ b/src/loaders/anime/circle38.module.css
@@ -0,0 +1,30 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  border: 3px solid;
+  border-color: #de3500 #0000 #fff #0000;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: 1s rotate linear infinite;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  top: 0;
+  left: 0;
+  position: absolute;
+  border: 10px solid transparent;
+  border-bottom-color: #fff;
+  transform: translate(-10px, 19px) rotate(-35deg);
+}
+.loader:after {
+  border-color: #de3500 #0000 #0000 #0000;
+  transform: translate(32px, 3px) rotate(-35deg);
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/bubble/bubble01.module.css b/src/loaders/bubble/bubble01.module.css
new file mode 100644
index 0000000..5d514ae
--- /dev/null
+++ b/src/loaders/bubble/bubble01.module.css
@@ -0,0 +1,37 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  box-sizing: border-box;
+  animation: zeroRotation 1s linear infinite alternate;
+}
+.loader::after,
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #ff3d00;
+  width: 16px;
+  height: 16px;
+  transform: translate(-50%, 50%);
+  border-radius: 50%;
+}
+.loader::before {
+  left: auto;
+  right: 0;
+  transform: translate(50%, 100%);
+}
+
+@keyframes zeroRotation {
+  0% {
+    transform: scale(1) rotate(0deg);
+  }
+  100% {
+    transform: scale(0) rotate(360deg);
+  }
+}
diff --git a/src/loaders/bubble/bubble02.module.css b/src/loaders/bubble/bubble02.module.css
new file mode 100644
index 0000000..062934f
--- /dev/null
+++ b/src/loaders/bubble/bubble02.module.css
@@ -0,0 +1,46 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: #fff;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after,
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 0;
+  background-color: #fff;
+  border-radius: 50%;
+  animation: scale50 1s infinite ease-in-out;
+}
+.loader::before {
+  top: auto;
+  bottom: 0;
+  background-color: #ff3d00;
+  animation-delay: 0.5s;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes scale50 {
+  0%,
+  100% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+  }
+}
diff --git a/src/loaders/bubble/bubble03.module.css b/src/loaders/bubble/bubble03.module.css
new file mode 100644
index 0000000..cc720c6
--- /dev/null
+++ b/src/loaders/bubble/bubble03.module.css
@@ -0,0 +1,42 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: #fff;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after,
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 50%;
+  left: 50%;
+  transform: scale(0.5) translate(0, 0);
+  background-color: #fff;
+  border-radius: 50%;
+  animation: animloader 1s infinite ease-in-out;
+}
+.loader::before {
+  background-color: #ff3d00;
+  transform: scale(0.5) translate(-48px, -48px);
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes animloader {
+  50% {
+    transform: scale(1) translate(-50%, -50%);
+  }
+}
diff --git a/src/loaders/bubble/bubble04.module.css b/src/loaders/bubble/bubble04.module.css
new file mode 100644
index 0000000..a28a242
--- /dev/null
+++ b/src/loaders/bubble/bubble04.module.css
@@ -0,0 +1,39 @@
+.loader {
+  position: relative;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  width: 15px;
+  height: 15px;
+  display: block;
+  position: relative;
+  margin: 10px auto;
+  border-radius: 50%;
+  background: #fff;
+  animation: left 1s infinite ease-in-out;
+}
+.loader:after {
+  background: #ff3d00;
+  animation: right 1s infinite ease-in-out;
+}
+
+@keyframes right {
+  0%,
+  100% {
+    transform: translate(-15px);
+  }
+  50% {
+    transform: translate(15px);
+  }
+}
+
+@keyframes left {
+  0%,
+  100% {
+    transform: translate(15px);
+  }
+  50% {
+    transform: translate(-15px);
+  }
+}
diff --git a/src/loaders/bubble/bubble05.module.css b/src/loaders/bubble/bubble05.module.css
new file mode 100644
index 0000000..bd98f1c
--- /dev/null
+++ b/src/loaders/bubble/bubble05.module.css
@@ -0,0 +1,37 @@
+.loader {
+  box-sizing: border-box;
+  position: relative;
+  width: 48px;
+  height: 48px;
+  animation: flip 1s linear infinite;
+}
+.loader:after,
+.loader:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  border-radius: 50%;
+  background: #ff3d00;
+  animation: spin 1s linear infinite;
+  transform-origin: 12px 100%;
+}
+.loader:before {
+  transform-origin: 0 50%;
+  background: #fff;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes flip {
+  0%,
+  50% {
+    transform: rotateY(0deg);
+  }
+  50%,
+  100% {
+    transform: rotateY(180deg);
+  }
+}
diff --git a/src/loaders/bubble/bubble06.module.css b/src/loaders/bubble/bubble06.module.css
new file mode 100644
index 0000000..bf3c007
--- /dev/null
+++ b/src/loaders/bubble/bubble06.module.css
@@ -0,0 +1,27 @@
+.loader {
+  box-sizing: border-box;
+  position: relative;
+  width: 48px;
+  height: 48px;
+  animation: spin 1s linear infinite;
+}
+.loader:after,
+.loader:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  border-radius: 50%;
+  background: #ff3d00;
+  animation: spin 1s linear infinite;
+  transform-origin: 0px 100%;
+}
+.loader:before {
+  transform-origin: 0 50%;
+  background: #fff;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/bubble/bubble07.module.css b/src/loaders/bubble/bubble07.module.css
new file mode 100644
index 0000000..035db07
--- /dev/null
+++ b/src/loaders/bubble/bubble07.module.css
@@ -0,0 +1,37 @@
+.loader {
+  box-sizing: border-box;
+  position: relative;
+  width: 48px;
+  height: 48px;
+  animation: spin 1s linear infinite;
+}
+.loader:after,
+.loader:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  border-radius: 50%;
+  background: #ff3d00;
+  animation: flipY 1s linear infinite;
+  transform-origin: 50% 50%;
+}
+.loader:before {
+  transform-origin: 0% 100%;
+  background: #fff;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes flipY {
+  0%,
+  50% {
+    transform: rotateY(0deg);
+  }
+  50%,
+  100% {
+    transform: rotateY(180deg);
+  }
+}
diff --git a/src/loaders/bubble/bubble08.module.css b/src/loaders/bubble/bubble08.module.css
new file mode 100644
index 0000000..3ecf93c
--- /dev/null
+++ b/src/loaders/bubble/bubble08.module.css
@@ -0,0 +1,33 @@
+.loader {
+  width: calc(100px - 14px);
+  height: 50px;
+  position: relative;
+  animation: flippx 1s infinite linear;
+}
+.loader:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #ff3d00;
+  transform-origin: -14px 50%;
+  animation: spin 0.5s infinite linear;
+}
+@keyframes flippx {
+  0%,
+  49% {
+    transform: scaleX(1);
+  }
+  50%,
+  100% {
+    transform: scaleX(-1);
+  }
+}
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/bubble/bubble09.module.css b/src/loaders/bubble/bubble09.module.css
new file mode 100644
index 0000000..59e5b86
--- /dev/null
+++ b/src/loaders/bubble/bubble09.module.css
@@ -0,0 +1,41 @@
+.loader,
+.loader:before,
+.loader:after {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  animation-fill-mode: both;
+  animation: bblFadInOut 1.8s infinite ease-in-out;
+}
+.loader {
+  color: #fff;
+  font-size: 7px;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  animation-delay: -0.16s;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+.loader:before {
+  left: -3.5em;
+  animation-delay: -0.32s;
+}
+.loader:after {
+  left: 3.5em;
+}
+
+@keyframes bblFadInOut {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em;
+  }
+  40% {
+    box-shadow: 0 2.5em 0 0;
+  }
+}
diff --git a/src/loaders/bubble/bubble10.module.css b/src/loaders/bubble/bubble10.module.css
new file mode 100644
index 0000000..e34b80e
--- /dev/null
+++ b/src/loaders/bubble/bubble10.module.css
@@ -0,0 +1,32 @@
+.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow:
+    32px 0 #fff,
+    -32px 0 #fff;
+  position: relative;
+  animation: flash 0.5s ease-out infinite alternate;
+}
+
+@keyframes flash {
+  0% {
+    background-color: #fff2;
+    box-shadow:
+      32px 0 #fff2,
+      -32px 0 #fff;
+  }
+  50% {
+    background-color: #fff;
+    box-shadow:
+      32px 0 #fff2,
+      -32px 0 #fff2;
+  }
+  100% {
+    background-color: #fff2;
+    box-shadow:
+      32px 0 #fff,
+      -32px 0 #fff2;
+  }
+}
diff --git a/src/loaders/bubble/bubble11.module.css b/src/loaders/bubble/bubble11.module.css
new file mode 100644
index 0000000..ba61902
--- /dev/null
+++ b/src/loaders/bubble/bubble11.module.css
@@ -0,0 +1,26 @@
+.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  background: #fff;
+  box-sizing: border-box;
+  animation: shadowExpandX 2s linear infinite alternate;
+}
+
+@keyframes shadowExpandX {
+  0% {
+    box-shadow:
+      0 0,
+      0 0;
+    color: rgba(255, 255, 255, 0.2);
+  }
+  100% {
+    box-shadow:
+      -24px 0,
+      24px 0;
+    color: rgba(255, 255, 255, 0.8);
+  }
+}
diff --git a/src/loaders/bubble/bubble12.module.css b/src/loaders/bubble/bubble12.module.css
new file mode 100644
index 0000000..f3f1d97
--- /dev/null
+++ b/src/loaders/bubble/bubble12.module.css
@@ -0,0 +1,35 @@
+.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  background: #fff;
+  box-shadow:
+    -24px 0 #fff,
+    24px 0 #fff;
+  box-sizing: border-box;
+  animation: shadowPulse 2s linear infinite;
+}
+
+@keyframes shadowPulse {
+  33% {
+    background: #fff;
+    box-shadow:
+      -24px 0 #ff3d00,
+      24px 0 #fff;
+  }
+  66% {
+    background: #ff3d00;
+    box-shadow:
+      -24px 0 #fff,
+      24px 0 #fff;
+  }
+  100% {
+    background: #fff;
+    box-shadow:
+      -24px 0 #fff,
+      24px 0 #ff3d00;
+  }
+}
diff --git a/src/loaders/bubble/bubble13.module.css b/src/loaders/bubble/bubble13.module.css
new file mode 100644
index 0000000..655f9eb
--- /dev/null
+++ b/src/loaders/bubble/bubble13.module.css
@@ -0,0 +1,24 @@
+.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  background: #ff3d00;
+  color: #fff;
+  box-shadow:
+    -24px 0,
+    24px 0;
+  box-sizing: border-box;
+  animation: rotation 2s ease-in-out infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/bubble/bubble14.module.css b/src/loaders/bubble/bubble14.module.css
new file mode 100644
index 0000000..7b58a0d
--- /dev/null
+++ b/src/loaders/bubble/bubble14.module.css
@@ -0,0 +1,49 @@
+.loader {
+  width: 82px;
+  height: 18px;
+  position: relative;
+}
+.loader::before,
+.loader::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 10%);
+  top: 0;
+  background: #ff3d00;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  animation: jump 0.5s ease-in infinite alternate;
+}
+
+.loader::after {
+  background: #0000;
+  color: #fff;
+  top: 100%;
+  box-shadow:
+    32px -20px,
+    -32px -20px;
+  animation: split 0.5s ease-out infinite alternate;
+}
+
+@keyframes split {
+  0% {
+    box-shadow:
+      8px -20px,
+      -8px -20px;
+  }
+  100% {
+    box-shadow:
+      32px -20px,
+      -32px -20px;
+  }
+}
+@keyframes jump {
+  0% {
+    transform: translate(-50%, -150%);
+  }
+  100% {
+    transform: translate(-50%, 10%);
+  }
+}
diff --git a/src/loaders/bubble/bubble15.module.css b/src/loaders/bubble/bubble15.module.css
new file mode 100644
index 0000000..e61f783
--- /dev/null
+++ b/src/loaders/bubble/bubble15.module.css
@@ -0,0 +1,25 @@
+.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #ff3d00;
+  position: relative;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  inset: 0;
+  background: #fff;
+  transform: rotate(0deg) translate(30px);
+  animation: rotate 1s ease infinite;
+}
+.loader:after {
+  animation-delay: 0.5s;
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg) translate(30px);
+  }
+}
diff --git a/src/loaders/bubble/bubble16.module.css b/src/loaders/bubble/bubble16.module.css
new file mode 100644
index 0000000..f9958b5
--- /dev/null
+++ b/src/loaders/bubble/bubble16.module.css
@@ -0,0 +1,39 @@
+.loader {
+  width: 64px;
+  height: 12px;
+  background:
+    radial-gradient(circle 6px, #fff 100%, transparent 0),
+    radial-gradient(circle 6px, #fff 100%, transparent 0);
+  background-size: 12px 12px;
+  background-position:
+    left center,
+    right center;
+  background-repeat: no-repeat;
+  position: relative;
+}
+.loader:before {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #ff3d00;
+  inset: 0;
+  margin: auto;
+  animation:
+    mvX 0.6s,
+    mvY 0.3s;
+  animation-timing-function: cubic-bezier(0.5, -300, 0.5, 300);
+  animation-iteration-count: infinite;
+}
+
+@keyframes mvX {
+  100% {
+    left: 0.85px;
+  }
+}
+@keyframes mvY {
+  100% {
+    top: 0.5px;
+  }
+}
diff --git a/src/loaders/bubble/bubble17.module.css b/src/loaders/bubble/bubble17.module.css
new file mode 100644
index 0000000..6767c93
--- /dev/null
+++ b/src/loaders/bubble/bubble17.module.css
@@ -0,0 +1,38 @@
+.loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: #fff;
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite alternate;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow:
+      -38px -6px,
+      -14px 6px,
+      14px -6px;
+  }
+  33% {
+    box-shadow:
+      -38px 6px,
+      -14px -6px,
+      14px 6px;
+  }
+  66% {
+    box-shadow:
+      -38px -6px,
+      -14px 6px,
+      14px -6px;
+  }
+  100% {
+    box-shadow:
+      -38px 6px,
+      -14px -6px,
+      14px 6px;
+  }
+}
diff --git a/src/loaders/bubble/bubble18.module.css b/src/loaders/bubble/bubble18.module.css
new file mode 100644
index 0000000..9d7974a
--- /dev/null
+++ b/src/loaders/bubble/bubble18.module.css
@@ -0,0 +1,48 @@
+.loader {
+  width: 108px;
+  height: 16px;
+  background:
+    radial-gradient(circle 8px at 8px center, #fff 100%, transparent 0),
+    radial-gradient(circle 8px at 8px center, #fff 100%, transparent 0);
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+  position: relative;
+  animation: ballX 1s linear infinite;
+}
+.loader:before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  inset: 0;
+  margin: auto;
+  animation: moveX 1s cubic-bezier(0.5, 300, 0.5, -300) infinite;
+}
+@keyframes ballX {
+  0%,
+  25%,
+  50%,
+  75%,
+  100% {
+    background-position:
+      25% 0,
+      75% 0;
+  }
+  40% {
+    background-position:
+      25% 0,
+      85% 0;
+  }
+  90% {
+    background-position:
+      15% 0,
+      75% 0;
+  }
+}
+@keyframes moveX {
+  100% {
+    transform: translate(0.15px);
+  }
+}
diff --git a/src/loaders/bubble/bubble19.module.css b/src/loaders/bubble/bubble19.module.css
new file mode 100644
index 0000000..cdd6688
--- /dev/null
+++ b/src/loaders/bubble/bubble19.module.css
@@ -0,0 +1,45 @@
+.loader {
+  position: relative;
+  width: 100px;
+  height: 16px;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 32px 0 #fff;
+  left: 0;
+  top: 0;
+  animation: ballMoveX 1s linear infinite;
+}
+.loader:after {
+  box-shadow: none;
+  transform-origin: 40px 0;
+  transform: rotate(-153deg);
+  animation: rotateLoader 1s linear infinite;
+}
+
+@keyframes rotateLoader {
+  0%,
+  10% {
+    transform: rotate(-153deg);
+  }
+  90%,
+  100% {
+    transform: rotate(0deg);
+  }
+}
+@keyframes ballMoveX {
+  0%,
+  10% {
+    transform: translateX(0);
+  }
+  90%,
+  100% {
+    transform: translateX(32px);
+  }
+}
diff --git a/src/loaders/bubble/bubble20.module.css b/src/loaders/bubble/bubble20.module.css
new file mode 100644
index 0000000..57c7ee6
--- /dev/null
+++ b/src/loaders/bubble/bubble20.module.css
@@ -0,0 +1,60 @@
+.loader {
+  position: relative;
+  width: 100px;
+  height: 16px;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 32px 0 #fff;
+  left: 0;
+  top: 0;
+  animation: ballMoveX 2s linear infinite;
+}
+.loader:after {
+  box-shadow: none;
+  transform: translateX(64px) scale(1);
+  z-index: 2;
+  animation: none;
+  animation: trfLoader 2s linear infinite;
+}
+
+@keyframes trfLoader {
+  0%,
+  5% {
+    transform: translateX(64px) scale(1);
+    background: #fff;
+  }
+  10% {
+    transform: translateX(64px) scale(1);
+    background: #ff3d00;
+  }
+  40% {
+    transform: translateX(32px) scale(1.5);
+    background: #ff3d00;
+  }
+  90%,
+  95% {
+    transform: translateX(0px) scale(1);
+    background: #ff3d00;
+  }
+  100% {
+    transform: translateX(0px) scale(1);
+    background: #fff;
+  }
+}
+@keyframes ballMoveX {
+  0%,
+  10% {
+    transform: translateX(0);
+  }
+  90%,
+  100% {
+    transform: translateX(32px);
+  }
+}
diff --git a/src/loaders/bubble/bubble21.module.css b/src/loaders/bubble/bubble21.module.css
new file mode 100644
index 0000000..d392962
--- /dev/null
+++ b/src/loaders/bubble/bubble21.module.css
@@ -0,0 +1,67 @@
+.loader {
+  animation: rotate 1s infinite;
+  height: 50px;
+  width: 50px;
+}
+
+.loader:before,
+.loader:after {
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 20px;
+  width: 20px;
+}
+.loader:before {
+  animation: ball1 1s infinite;
+  background-color: #fff;
+  box-shadow: 30px 0 0 #ff3d00;
+  margin-bottom: 10px;
+}
+.loader:after {
+  animation: ball2 1s infinite;
+  background-color: #ff3d00;
+  box-shadow: 30px 0 0 #fff;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg) scale(0.8);
+  }
+  50% {
+    transform: rotate(360deg) scale(1.2);
+  }
+  100% {
+    transform: rotate(720deg) scale(0.8);
+  }
+}
+
+@keyframes ball1 {
+  0% {
+    box-shadow: 30px 0 0 #ff3d00;
+  }
+  50% {
+    box-shadow: 0 0 0 #ff3d00;
+    margin-bottom: 0;
+    transform: translate(15px, 15px);
+  }
+  100% {
+    box-shadow: 30px 0 0 #ff3d00;
+    margin-bottom: 10px;
+  }
+}
+
+@keyframes ball2 {
+  0% {
+    box-shadow: 30px 0 0 #fff;
+  }
+  50% {
+    box-shadow: 0 0 0 #fff;
+    margin-top: -20px;
+    transform: translate(15px, 15px);
+  }
+  100% {
+    box-shadow: 30px 0 0 #fff;
+    margin-top: 0;
+  }
+}
diff --git a/src/loaders/bubble/bubble22.module.css b/src/loaders/bubble/bubble22.module.css
new file mode 100644
index 0000000..e118038
--- /dev/null
+++ b/src/loaders/bubble/bubble22.module.css
@@ -0,0 +1,78 @@
+.loader {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: #fff;
+  left: -100px;
+  box-sizing: border-box;
+  animation: shadowRolling 2s linear infinite;
+}
+
+@keyframes shadowRolling {
+  0% {
+    box-shadow:
+      0px 0 rgba(255, 255, 255, 0),
+      0px 0 rgba(255, 255, 255, 0),
+      0px 0 rgba(255, 255, 255, 0),
+      0px 0 rgba(255, 255, 255, 0);
+  }
+  12% {
+    box-shadow:
+      100px 0 white,
+      0px 0 rgba(255, 255, 255, 0),
+      0px 0 rgba(255, 255, 255, 0),
+      0px 0 rgba(255, 255, 255, 0);
+  }
+  25% {
+    box-shadow:
+      110px 0 white,
+      100px 0 white,
+      0px 0 rgba(255, 255, 255, 0),
+      0px 0 rgba(255, 255, 255, 0);
+  }
+  36% {
+    box-shadow:
+      120px 0 white,
+      110px 0 white,
+      100px 0 white,
+      0px 0 rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow:
+      130px 0 white,
+      120px 0 white,
+      110px 0 white,
+      100px 0 white;
+  }
+  62% {
+    box-shadow:
+      200px 0 rgba(255, 255, 255, 0),
+      130px 0 white,
+      120px 0 white,
+      110px 0 white;
+  }
+  75% {
+    box-shadow:
+      200px 0 rgba(255, 255, 255, 0),
+      200px 0 rgba(255, 255, 255, 0),
+      130px 0 white,
+      120px 0 white;
+  }
+  87% {
+    box-shadow:
+      200px 0 rgba(255, 255, 255, 0),
+      200px 0 rgba(255, 255, 255, 0),
+      200px 0 rgba(255, 255, 255, 0),
+      130px 0 white;
+  }
+  100% {
+    box-shadow:
+      200px 0 rgba(255, 255, 255, 0),
+      200px 0 rgba(255, 255, 255, 0),
+      200px 0 rgba(255, 255, 255, 0),
+      200px 0 rgba(255, 255, 255, 0);
+  }
+}
diff --git a/src/loaders/bubble/bubble23.module.css b/src/loaders/bubble/bubble23.module.css
new file mode 100644
index 0000000..3d0d66f
--- /dev/null
+++ b/src/loaders/bubble/bubble23.module.css
@@ -0,0 +1,49 @@
+.loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: #fff;
+  box-sizing: border-box;
+  animation: animloader 2s linear infinite;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow:
+      14px 0 0 -2px,
+      38px 0 0 -2px,
+      -14px 0 0 -2px,
+      -38px 0 0 -2px;
+  }
+  25% {
+    box-shadow:
+      14px 0 0 -2px,
+      38px 0 0 -2px,
+      -14px 0 0 -2px,
+      -38px 0 0 2px;
+  }
+  50% {
+    box-shadow:
+      14px 0 0 -2px,
+      38px 0 0 -2px,
+      -14px 0 0 2px,
+      -38px 0 0 -2px;
+  }
+  75% {
+    box-shadow:
+      14px 0 0 2px,
+      38px 0 0 -2px,
+      -14px 0 0 -2px,
+      -38px 0 0 -2px;
+  }
+  100% {
+    box-shadow:
+      14px 0 0 -2px,
+      38px 0 0 2px,
+      -14px 0 0 -2px,
+      -38px 0 0 -2px;
+  }
+}
diff --git a/src/loaders/bubble/bubble24.module.css b/src/loaders/bubble/bubble24.module.css
new file mode 100644
index 0000000..d119403
--- /dev/null
+++ b/src/loaders/bubble/bubble24.module.css
@@ -0,0 +1,42 @@
+.loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: #fff;
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite alternate;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow:
+      -38px -12px,
+      -14px 0,
+      14px 0,
+      38px 0;
+  }
+  33% {
+    box-shadow:
+      -38px 0px,
+      -14px -12px,
+      14px 0,
+      38px 0;
+  }
+  66% {
+    box-shadow:
+      -38px 0px,
+      -14px 0,
+      14px -12px,
+      38px 0;
+  }
+  100% {
+    box-shadow:
+      -38px 0,
+      -14px 0,
+      14px 0,
+      38px -12px;
+  }
+}
diff --git a/src/loaders/bubble/bubble25.module.css b/src/loaders/bubble/bubble25.module.css
new file mode 100644
index 0000000..a245699
--- /dev/null
+++ b/src/loaders/bubble/bubble25.module.css
@@ -0,0 +1,64 @@
+.loader {
+  width: 16px;
+  height: 16px;
+  position: relative;
+  left: -32px;
+  border-radius: 50%;
+  color: #fff;
+  background: currentColor;
+  box-shadow:
+    32px 0,
+    -32px 0,
+    64px 0;
+}
+
+.loader::after {
+  content: '';
+  position: absolute;
+  left: -32px;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 10px;
+  background: #ff3d00;
+  animation: move 3s linear infinite alternate;
+}
+
+@keyframes move {
+  0%,
+  5% {
+    left: -32px;
+    width: 16px;
+  }
+  15%,
+  20% {
+    left: -32px;
+    width: 48px;
+  }
+  30%,
+  35% {
+    left: 0px;
+    width: 16px;
+  }
+  45%,
+  50% {
+    left: 0px;
+    width: 48px;
+  }
+  60%,
+  65% {
+    left: 32px;
+    width: 16px;
+  }
+
+  75%,
+  80% {
+    left: 32px;
+    width: 48px;
+  }
+  95%,
+  100% {
+    left: 64px;
+    width: 16px;
+  }
+}
diff --git a/src/loaders/bubble/bubble26.module.css b/src/loaders/bubble/bubble26.module.css
new file mode 100644
index 0000000..1f5aa02
--- /dev/null
+++ b/src/loaders/bubble/bubble26.module.css
@@ -0,0 +1,84 @@
+.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow:
+    32px 0 #fff,
+    -32px 0 #fff;
+  position: relative;
+  animation: flash 0.3s ease-in infinite alternate;
+}
+.loader::before,
+.loader::after {
+  content: '';
+  position: absolute;
+  left: -64px;
+  top: 0;
+  background: #fff;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  transform-origin: 35px -35px;
+  transform: rotate(45deg);
+  animation: hitL 0.3s ease-in infinite alternate;
+}
+
+.loader::after {
+  left: 64px;
+  transform: rotate(-45deg);
+  transform-origin: -35px -35px;
+  animation: hitR 0.3s ease-out infinite alternate;
+}
+
+@keyframes flash {
+  0%,
+  100% {
+    background-color: rgba(255, 255, 255, 0.25);
+    box-shadow:
+      32px 0 rgba(255, 255, 255, 0.25),
+      -32px 0 rgba(255, 255, 255, 0.25);
+  }
+  25% {
+    background-color: rgba(255, 255, 255, 0.25);
+    box-shadow:
+      32px 0 rgba(255, 255, 255, 0.25),
+      -32px 0 rgba(255, 255, 255, 1);
+  }
+  50% {
+    background-color: rgba(255, 255, 255, 1);
+    box-shadow:
+      32px 0 rgba(255, 255, 255, 0.25),
+      -32px 0 rgba(255, 255, 255, 0.25);
+  }
+  75% {
+    background-color: rgba(255, 255, 255, 0.25);
+    box-shadow:
+      32px 0 rgba(255, 255, 255, 1),
+      -32px 0 rgba(255, 255, 255, 0.25);
+  }
+}
+
+@keyframes hitL {
+  0% {
+    transform: rotate(45deg);
+    background-color: rgba(255, 255, 255, 1);
+  }
+  25%,
+  100% {
+    transform: rotate(0deg);
+    background-color: rgba(255, 255, 255, 0.25);
+  }
+}
+
+@keyframes hitR {
+  0%,
+  75% {
+    transform: rotate(0deg);
+    background-color: rgba(255, 255, 255, 0.25);
+  }
+  100% {
+    transform: rotate(-45deg);
+    background-color: rgba(255, 255, 255, 1);
+  }
+}
diff --git a/src/loaders/bubble/bubble27.module.css b/src/loaders/bubble/bubble27.module.css
new file mode 100644
index 0000000..ea3fe1c
--- /dev/null
+++ b/src/loaders/bubble/bubble27.module.css
@@ -0,0 +1,40 @@
+.loader {
+  position: relative;
+  width: 15px;
+  height: 64px;
+}
+.loader::after,
+.loader::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #fff;
+  background: currentColor;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  box-shadow:
+    45px 0,
+    -45px 0;
+  animation: move 0.5s linear infinite alternate;
+}
+
+.loader::before {
+  top: 100%;
+  box-shadow: 50px 0;
+  left: -25px;
+  animation-direction: alternate-reverse;
+}
+
+@keyframes move {
+  0% {
+    top: 0;
+  }
+  50% {
+    top: 50%;
+  }
+  100% {
+    top: 100%;
+  }
+}
diff --git a/src/loaders/bubble/bubble28.module.css b/src/loaders/bubble/bubble28.module.css
new file mode 100644
index 0000000..27802a1
--- /dev/null
+++ b/src/loaders/bubble/bubble28.module.css
@@ -0,0 +1,44 @@
+.loader {
+  position: relative;
+  display: flex;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  width: 15px;
+  height: 15px;
+  display: inline-block;
+  position: relative;
+  margin: 0 5px;
+  border-radius: 50%;
+  color: #fff;
+  background: currentColor;
+  box-shadow:
+    50px 0,
+    -50px 0;
+  animation: left 1s infinite ease-in-out;
+}
+.loader:after {
+  color: #ff3d00;
+  animation: right 1.1s infinite ease-in-out;
+}
+
+@keyframes right {
+  0%,
+  100% {
+    transform: translateY(-10px);
+  }
+  50% {
+    transform: translateY(10px);
+  }
+}
+
+@keyframes left {
+  0%,
+  100% {
+    transform: translateY(10px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
diff --git a/src/loaders/bubble/bubble29.module.css b/src/loaders/bubble/bubble29.module.css
new file mode 100644
index 0000000..1f26780
--- /dev/null
+++ b/src/loaders/bubble/bubble29.module.css
@@ -0,0 +1,43 @@
+.loader {
+  height: 150px;
+  position: relative;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  width: 15px;
+  height: 15px;
+  display: block;
+  position: relative;
+  margin: 10px auto;
+  border-radius: 50%;
+  color: #fff;
+  background: currentColor;
+  box-shadow:
+    0 50px,
+    0 100px;
+  animation: left 1s infinite ease-in-out;
+}
+.loader:after {
+  animation: right 1.1s infinite ease-in-out;
+}
+
+@keyframes right {
+  0%,
+  100% {
+    transform: translate(-15px);
+  }
+  50% {
+    transform: translate(15px);
+  }
+}
+
+@keyframes left {
+  0%,
+  100% {
+    transform: translate(15px);
+  }
+  50% {
+    transform: translate(-15px);
+  }
+}
diff --git a/src/loaders/bubble/bubble30.module.css b/src/loaders/bubble/bubble30.module.css
new file mode 100644
index 0000000..c1e4653
--- /dev/null
+++ b/src/loaders/bubble/bubble30.module.css
@@ -0,0 +1,42 @@
+.loader {
+  width: 32px;
+  height: 32px;
+  transform: translateY(100%);
+  border-radius: 50%;
+  background: #fff;
+  position: relative;
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: #fff;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -200%;
+}
+
+.loader:after {
+  animation: moveX 0.5s infinite linear alternate;
+}
+
+@keyframes moveX {
+  0% {
+    top: 0%;
+    transform: translateX(-50%) scale(1.5);
+  }
+
+  50% {
+    top: -75%;
+    transform: translateX(-50%) scale(0.5);
+  }
+
+  100% {
+    top: -200%;
+    transform: translateX(-50%) scale(1.5);
+  }
+}
diff --git a/src/loaders/bubble/bubble31.module.css b/src/loaders/bubble/bubble31.module.css
new file mode 100644
index 0000000..6dc9aa9
--- /dev/null
+++ b/src/loaders/bubble/bubble31.module.css
@@ -0,0 +1,36 @@
+.loader {
+  width: 32px;
+  height: 32px;
+  position: relative;
+  border-radius: 50%;
+  color: #ff3d00;
+  animation: fill 1s ease-in infinite alternate;
+}
+
+.loader::before,
+.loader::after {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+  left: 48px;
+  top: 0;
+  animation: fill 0.9s ease-in infinite alternate;
+}
+
+.loader::after {
+  left: auto;
+  right: 48px;
+  animation-duration: 1.1s;
+}
+
+@keyframes fill {
+  0% {
+    box-shadow: 0 0 0 2px inset;
+  }
+
+  100% {
+    box-shadow: 0 0 0 10px inset;
+  }
+}
diff --git a/src/loaders/bubble/bubble32.module.css b/src/loaders/bubble/bubble32.module.css
new file mode 100644
index 0000000..2684d42
--- /dev/null
+++ b/src/loaders/bubble/bubble32.module.css
@@ -0,0 +1,41 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+.loader::after,
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #ff3d00;
+  width: 16px;
+  height: 16px;
+  transform: translate(-50%, 50%);
+  border-radius: 50%;
+}
+
+.loader::before {
+  left: auto;
+  right: 0;
+  background: #fff;
+  transform: translate(50%, 100%);
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/bubble/bubble33.module.css b/src/loaders/bubble/bubble33.module.css
new file mode 100644
index 0000000..b5819e2
--- /dev/null
+++ b/src/loaders/bubble/bubble33.module.css
@@ -0,0 +1,50 @@
+.loader {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  position: relative;
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: #fff;
+  animation: slide 1s infinite linear alternate;
+  opacity: 0.5;
+}
+
+.loader:after {
+  animation: slide2 1s infinite linear alternate;
+  opacity: 1;
+}
+
+@keyframes slide {
+  0%,
+  20% {
+    transform: translate(0, 0);
+  }
+
+  80%,
+  100% {
+    transform: translate(15px, 15px);
+  }
+}
+
+@keyframes slide2 {
+  0%,
+  20% {
+    transform: translate(0, 0);
+  }
+
+  80%,
+  100% {
+    transform: translate(-15px, -15px);
+  }
+}
diff --git a/src/loaders/bubble/bubble34.module.css b/src/loaders/bubble/bubble34.module.css
new file mode 100644
index 0000000..dfee43c
--- /dev/null
+++ b/src/loaders/bubble/bubble34.module.css
@@ -0,0 +1,39 @@
+.loader {
+  width: 64px;
+  height: 48px;
+  position: relative;
+  animation: split 1s ease-in infinite alternate;
+}
+
+.loader::before,
+.loader::after {
+  content: '';
+  position: absolute;
+  height: 48px;
+  width: 48px;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+  transform: translateX(-10px);
+  background: #ff3d00;
+  opacity: 0.75;
+  backdrop-filter: blur(20px);
+}
+
+.loader::after {
+  left: auto;
+  right: 0;
+  background: #fff;
+  transform: translateX(10px);
+}
+
+@keyframes split {
+  0%,
+  25% {
+    width: 64px;
+  }
+
+  100% {
+    width: 148px;
+  }
+}
diff --git a/src/loaders/bubble/bubble35.module.css b/src/loaders/bubble/bubble35.module.css
new file mode 100644
index 0000000..15ea1be
--- /dev/null
+++ b/src/loaders/bubble/bubble35.module.css
@@ -0,0 +1,34 @@
+.loader {
+  width: 84px;
+  height: 84px;
+  position: relative;
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: #fff;
+  transform: translate(-50%, -100%) scale(0);
+  animation: push 2s infinite linear;
+}
+
+.loader:after {
+  animation-delay: 1s;
+}
+
+@keyframes push {
+  0%,
+  50% {
+    transform: translate(-50%, 0%) scale(1);
+  }
+
+  100% {
+    transform: translate(-50%, -100%) scale(0);
+  }
+}
diff --git a/src/loaders/bubble/bubble36.module.css b/src/loaders/bubble/bubble36.module.css
new file mode 100644
index 0000000..eea8ab6
--- /dev/null
+++ b/src/loaders/bubble/bubble36.module.css
@@ -0,0 +1,38 @@
+.loader {
+  width: 84px;
+  height: 84px;
+  position: relative;
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 84px;
+  height: 84px;
+  border-radius: 50%;
+  background: #ff3d00;
+  animation: push 1s infinite linear alternate;
+}
+
+.loader:after {
+  top: auto;
+  bottom: 0;
+  left: 0;
+  background: #fff;
+  animation-direction: alternate-reverse;
+}
+
+@keyframes push {
+  0% {
+    width: 14px;
+    height: 14px;
+  }
+
+  100% {
+    width: 84px;
+    height: 84px;
+  }
+}
diff --git a/src/loaders/bubble/bubble37.module.css b/src/loaders/bubble/bubble37.module.css
new file mode 100644
index 0000000..1a7bbb3
--- /dev/null
+++ b/src/loaders/bubble/bubble37.module.css
@@ -0,0 +1,45 @@
+.loader {
+  width: 84px;
+  height: 84px;
+  position: relative;
+  overflow: hidden;
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: #fff;
+  transform: translate(-50%, 100%) scale(0);
+  animation: push 2s infinite ease-in;
+}
+
+.loader:after {
+  animation-delay: 1s;
+}
+
+@keyframes push {
+  0% {
+    transform: translate(-50%, 100%) scale(1);
+  }
+
+  15%,
+  25% {
+    transform: translate(-50%, 50%) scale(1);
+  }
+
+  50%,
+  75% {
+    transform: translate(-50%, -30%) scale(0.5);
+  }
+
+  80%,
+  100% {
+    transform: translate(-50%, -50%) scale(0);
+  }
+}
diff --git a/src/loaders/bubble/index.ts b/src/loaders/bubble/index.ts
new file mode 100644
index 0000000..3584849
--- /dev/null
+++ b/src/loaders/bubble/index.ts
@@ -0,0 +1,5 @@
+import { getDynamicStyle } from '../../util';
+const styleModules = import.meta.glob('./*.module.css');
+const rawModules = import.meta.glob('./*.module.css', { as: 'raw' });
+
+export const loadBubbleStyles = getDynamicStyle(styleModules, rawModules);
diff --git a/src/loaders/circle/circle01.module.css b/src/loaders/circle/circle01.module.css
new file mode 100644
index 0000000..fbf81f7
--- /dev/null
+++ b/src/loaders/circle/circle01.module.css
@@ -0,0 +1,19 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid #fff;
+  border-bottom-color: #ff3d00;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle02.module.css b/src/loaders/circle/circle02.module.css
new file mode 100644
index 0000000..29a2155
--- /dev/null
+++ b/src/loaders/circle/circle02.module.css
@@ -0,0 +1,19 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid #fff;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle03.module.css b/src/loaders/circle/circle03.module.css
new file mode 100644
index 0000000..5be2b54
--- /dev/null
+++ b/src/loaders/circle/circle03.module.css
@@ -0,0 +1,40 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite;
+}
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 5px solid #fff;
+  animation: prixClipFix 2s linear infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+}
diff --git a/src/loaders/circle/circle4.module.css b/src/loaders/circle/circle04.module.css
similarity index 97%
rename from src/loaders/circle/circle4.module.css
rename to src/loaders/circle/circle04.module.css
index 409a88b..955c195 100644
--- a/src/loaders/circle/circle4.module.css
+++ b/src/loaders/circle/circle04.module.css
@@ -5,10 +5,9 @@
   position: relative;
   animation: rotate 1s linear infinite;
 }
-
 .loader::before,
 .loader::after {
-  content: "";
+  content: '';
   box-sizing: border-box;
   position: absolute;
   inset: 0px;
@@ -16,7 +15,6 @@
   border: 5px solid #fff;
   animation: prixClipFix 2s linear infinite;
 }
-
 .loader::after {
   transform: rotate3d(90, 90, 0, 180deg);
   border-color: #ff3d00;
@@ -26,7 +24,6 @@
   0% {
     transform: rotate(0deg);
   }
-
   100% {
     transform: rotate(360deg);
   }
@@ -36,11 +33,9 @@
   0% {
     clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
   }
-
   50% {
     clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
   }
-
   75%,
   100% {
     clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
diff --git a/src/loaders/circle/circle5.module.css b/src/loaders/circle/circle05.module.css
similarity index 97%
rename from src/loaders/circle/circle5.module.css
rename to src/loaders/circle/circle05.module.css
index 294d8e9..1418b04 100644
--- a/src/loaders/circle/circle5.module.css
+++ b/src/loaders/circle/circle05.module.css
@@ -5,10 +5,9 @@
   position: relative;
   animation: rotate 1s linear infinite;
 }
-
 .loader::before,
 .loader::after {
-  content: "";
+  content: '';
   box-sizing: border-box;
   position: absolute;
   inset: 0px;
@@ -16,7 +15,6 @@
   border: 5px solid #fff;
   animation: prixClipFix 2s linear infinite;
 }
-
 .loader::after {
   inset: 8px;
   transform: rotate3d(90, 90, 0, 180deg);
@@ -27,7 +25,6 @@
   0% {
     transform: rotate(0deg);
   }
-
   100% {
     transform: rotate(360deg);
   }
@@ -37,11 +34,9 @@
   0% {
     clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
   }
-
   50% {
     clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
   }
-
   75%,
   100% {
     clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
diff --git a/src/loaders/circle/circle06.module.css b/src/loaders/circle/circle06.module.css
new file mode 100644
index 0000000..b8d5a2b
--- /dev/null
+++ b/src/loaders/circle/circle06.module.css
@@ -0,0 +1,51 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite;
+}
+.loader::before,
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 5px solid #fff;
+  animation: prixClipFix 2s linear infinite;
+}
+.loader::after {
+  border-color: #ff3d00;
+  animation:
+    prixClipFix 2s linear infinite,
+    rotate 0.5s linear infinite reverse;
+  inset: 6px;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+}
diff --git a/src/loaders/circle/circle07.module.css b/src/loaders/circle/circle07.module.css
new file mode 100644
index 0000000..5d070ca
--- /dev/null
+++ b/src/loaders/circle/circle07.module.css
@@ -0,0 +1,32 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-bottom-color: #ff3d00;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle08.module.css b/src/loaders/circle/circle08.module.css
new file mode 100644
index 0000000..8ae43db
--- /dev/null
+++ b/src/loaders/circle/circle08.module.css
@@ -0,0 +1,32 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-bottom-color: #ff3d00;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle09.module.css b/src/loaders/circle/circle09.module.css
new file mode 100644
index 0000000..0b6ab81
--- /dev/null
+++ b/src/loaders/circle/circle09.module.css
@@ -0,0 +1,32 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 3px solid;
+  border-color: #ff3d00 transparent;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle1.module.css b/src/loaders/circle/circle1.module.css
deleted file mode 100644
index bc5cdda..0000000
--- a/src/loaders/circle/circle1.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.loader {
-    width: 48px;
-    height: 48px;
-    border: 5px solid #FFF;
-    border-bottom-color: #FF3D00;
-    border-radius: 50%;
-    display: inline-block;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-}
-
-@keyframes rotation {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
\ No newline at end of file
diff --git a/src/loaders/circle/circle10.module.css b/src/loaders/circle/circle10.module.css
new file mode 100644
index 0000000..63a6360
--- /dev/null
+++ b/src/loaders/circle/circle10.module.css
@@ -0,0 +1,32 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: 3px solid;
+  border-color: #ff3d00 transparent;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle11.module.css b/src/loaders/circle/circle11.module.css
new file mode 100644
index 0000000..45e853d
--- /dev/null
+++ b/src/loaders/circle/circle11.module.css
@@ -0,0 +1,39 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after,
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #ff3d00;
+  width: 6px;
+  height: 6px;
+  transform: translate(150%, 150%);
+  border-radius: 50%;
+}
+.loader::before {
+  left: auto;
+  top: auto;
+  right: 0;
+  bottom: 0;
+  transform: translate(-150%, -150%);
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle12.module.css b/src/loaders/circle/circle12.module.css
new file mode 100644
index 0000000..9b30903
--- /dev/null
+++ b/src/loaders/circle/circle12.module.css
@@ -0,0 +1,37 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after,
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #ff3d00;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+.loader::before {
+  left: auto;
+  top: auto;
+  right: 0;
+  bottom: 0;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle13.module.css b/src/loaders/circle/circle13.module.css
new file mode 100644
index 0000000..9e82da3
--- /dev/null
+++ b/src/loaders/circle/circle13.module.css
@@ -0,0 +1,31 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #ff3d00;
+  width: 16px;
+  height: 16px;
+  transform: translate(-50%, 50%);
+  border-radius: 50%;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle14.module.css b/src/loaders/circle/circle14.module.css
new file mode 100644
index 0000000..682b670
--- /dev/null
+++ b/src/loaders/circle/circle14.module.css
@@ -0,0 +1,30 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 2px solid #ff3d00;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  border: 2px solid #fff;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle15.module.css b/src/loaders/circle/circle15.module.css
new file mode 100644
index 0000000..ee9bcf7
--- /dev/null
+++ b/src/loaders/circle/circle15.module.css
@@ -0,0 +1,46 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 3px solid;
+  border-color: #fff #fff transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  border: 3px solid;
+  border-color: transparent #ff3d00 #ff3d00;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  animation: rotationBack 0.5s linear infinite;
+  transform-origin: center center;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rotationBack {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
diff --git a/src/loaders/circle/circle16.module.css b/src/loaders/circle/circle16.module.css
new file mode 100644
index 0000000..0dc9c88
--- /dev/null
+++ b/src/loaders/circle/circle16.module.css
@@ -0,0 +1,53 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 3px solid;
+  border-color: #fff #fff transparent transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after,
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  border: 3px solid;
+  border-color: transparent transparent #ff3d00 #ff3d00;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: rotationBack 0.5s linear infinite;
+  transform-origin: center center;
+}
+.loader::before {
+  width: 32px;
+  height: 32px;
+  border-color: #fff #fff transparent transparent;
+  animation: rotation 1.5s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotationBack {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
diff --git a/src/loaders/circle/circle17.module.css b/src/loaders/circle/circle17.module.css
new file mode 100644
index 0000000..dc1b18d
--- /dev/null
+++ b/src/loaders/circle/circle17.module.css
@@ -0,0 +1,45 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 3px dotted #fff;
+  border-style: solid solid dotted dotted;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 2s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  border: 3px dotted #ff3d00;
+  border-style: solid solid dotted;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  animation: rotationBack 1s linear infinite;
+  transform-origin: center center;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotationBack {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
diff --git a/src/loaders/circle/circle18.module.css b/src/loaders/circle/circle18.module.css
new file mode 100644
index 0000000..4747e99
--- /dev/null
+++ b/src/loaders/circle/circle18.module.css
@@ -0,0 +1,30 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  background: #ff3d00;
+  width: 3px;
+  height: 24px;
+  transform: translateX(-50%);
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle19.module.css b/src/loaders/circle/circle19.module.css
new file mode 100644
index 0000000..0da242a
--- /dev/null
+++ b/src/loaders/circle/circle19.module.css
@@ -0,0 +1,44 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid #fff;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  position: relative;
+  animation: pulse 1s linear infinite;
+}
+.loader:after {
+  content: '';
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  border: 5px solid #fff;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  animation: scaleUp 1s linear infinite;
+}
+
+@keyframes scaleUp {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+  }
+  60%,
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+@keyframes pulse {
+  0%,
+  60%,
+  100% {
+    transform: scale(1);
+  }
+  80% {
+    transform: scale(1.2);
+  }
+}
diff --git a/src/loaders/circle/circle2.module.css b/src/loaders/circle/circle2.module.css
deleted file mode 100644
index 97f3ddd..0000000
--- a/src/loaders/circle/circle2.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.loader {
-    width: 48px;
-    height: 48px;
-    border: 5px solid #FFF;
-    border-bottom-color: transparent;
-    border-radius: 50%;
-    display: inline-block;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-}
-
-@keyframes rotation {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
\ No newline at end of file
diff --git a/src/loaders/circle/circle20.module.css b/src/loaders/circle/circle20.module.css
new file mode 100644
index 0000000..6d87198
--- /dev/null
+++ b/src/loaders/circle/circle20.module.css
@@ -0,0 +1,33 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader::after,
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  position: absolute;
+  left: 0;
+  top: 0;
+  animation: animloader 2s linear infinite;
+}
+.loader::after {
+  animation-delay: 1s;
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
diff --git a/src/loaders/circle/circle21.module.css b/src/loaders/circle/circle21.module.css
new file mode 100644
index 0000000..0a3015b
--- /dev/null
+++ b/src/loaders/circle/circle21.module.css
@@ -0,0 +1,19 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px dotted #fff;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 2s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle22.module.css b/src/loaders/circle/circle22.module.css
new file mode 100644
index 0000000..d609b1f
--- /dev/null
+++ b/src/loaders/circle/circle22.module.css
@@ -0,0 +1,103 @@
+.loader {
+  color: #fff;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  animation: mulShdSpin 1.3s infinite linear;
+  transform: translateZ(0);
+}
+
+@keyframes mulShdSpin {
+  0%,
+  100% {
+    box-shadow:
+      0 -3em 0 0.2em,
+      2em -2em 0 0em,
+      3em 0 0 -1em,
+      2em 2em 0 -1em,
+      0 3em 0 -1em,
+      -2em 2em 0 -1em,
+      -3em 0 0 -1em,
+      -2em -2em 0 0;
+  }
+  12.5% {
+    box-shadow:
+      0 -3em 0 0,
+      2em -2em 0 0.2em,
+      3em 0 0 0,
+      2em 2em 0 -1em,
+      0 3em 0 -1em,
+      -2em 2em 0 -1em,
+      -3em 0 0 -1em,
+      -2em -2em 0 -1em;
+  }
+  25% {
+    box-shadow:
+      0 -3em 0 -0.5em,
+      2em -2em 0 0,
+      3em 0 0 0.2em,
+      2em 2em 0 0,
+      0 3em 0 -1em,
+      -2em 2em 0 -1em,
+      -3em 0 0 -1em,
+      -2em -2em 0 -1em;
+  }
+  37.5% {
+    box-shadow:
+      0 -3em 0 -1em,
+      2em -2em 0 -1em,
+      3em 0em 0 0,
+      2em 2em 0 0.2em,
+      0 3em 0 0em,
+      -2em 2em 0 -1em,
+      -3em 0em 0 -1em,
+      -2em -2em 0 -1em;
+  }
+  50% {
+    box-shadow:
+      0 -3em 0 -1em,
+      2em -2em 0 -1em,
+      3em 0 0 -1em,
+      2em 2em 0 0em,
+      0 3em 0 0.2em,
+      -2em 2em 0 0,
+      -3em 0em 0 -1em,
+      -2em -2em 0 -1em;
+  }
+  62.5% {
+    box-shadow:
+      0 -3em 0 -1em,
+      2em -2em 0 -1em,
+      3em 0 0 -1em,
+      2em 2em 0 -1em,
+      0 3em 0 0,
+      -2em 2em 0 0.2em,
+      -3em 0 0 0,
+      -2em -2em 0 -1em;
+  }
+  75% {
+    box-shadow:
+      0em -3em 0 -1em,
+      2em -2em 0 -1em,
+      3em 0em 0 -1em,
+      2em 2em 0 -1em,
+      0 3em 0 -1em,
+      -2em 2em 0 0,
+      -3em 0em 0 0.2em,
+      -2em -2em 0 0;
+  }
+  87.5% {
+    box-shadow:
+      0em -3em 0 0,
+      2em -2em 0 -1em,
+      3em 0 0 -1em,
+      2em 2em 0 -1em,
+      0 3em 0 -1em,
+      -2em 2em 0 0,
+      -3em 0em 0 0,
+      -2em -2em 0 0.2em;
+  }
+}
diff --git a/src/loaders/circle/circle23.module.css b/src/loaders/circle/circle23.module.css
new file mode 100644
index 0000000..7ddde99
--- /dev/null
+++ b/src/loaders/circle/circle23.module.css
@@ -0,0 +1,101 @@
+.loader {
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  animation: mulShdSpin 1.1s infinite ease;
+  transform: translateZ(0);
+}
+@keyframes mulShdSpin {
+  0%,
+  100% {
+    box-shadow:
+      0em -2.6em 0em 0em #ffffff,
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
+  }
+  12.5% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
+      1.8em -1.8em 0 0em #ffffff,
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
+  }
+  25% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7),
+      2.5em 0em 0 0em #ffffff,
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+  }
+  37.5% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.7),
+      1.75em 1.75em 0 0em #ffffff,
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+  }
+  50% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7),
+      0em 2.5em 0 0em #ffffff,
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+  }
+  62.5% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.7),
+      -1.8em 1.8em 0 0em #ffffff,
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+  }
+  75% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),
+      -2.6em 0em 0 0em #ffffff,
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+  }
+  87.5% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.7),
+      -1.8em -1.8em 0 0em #ffffff;
+  }
+}
diff --git a/src/loaders/circle/circle24.module.css b/src/loaders/circle/circle24.module.css
new file mode 100644
index 0000000..365b59c
--- /dev/null
+++ b/src/loaders/circle/circle24.module.css
@@ -0,0 +1,76 @@
+.loader {
+  color: #ffffff;
+  font-size: 45px;
+  text-indent: -9999em;
+  overflow: hidden;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  transform: translateZ(0);
+  animation:
+    mltShdSpin 1.7s infinite ease,
+    round 1.7s infinite ease;
+}
+
+@keyframes mltShdSpin {
+  0% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+  5%,
+  95% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+  10%,
+  59% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.087em -0.825em 0 -0.42em,
+      -0.173em -0.812em 0 -0.44em,
+      -0.256em -0.789em 0 -0.46em,
+      -0.297em -0.775em 0 -0.477em;
+  }
+  20% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.338em -0.758em 0 -0.42em,
+      -0.555em -0.617em 0 -0.44em,
+      -0.671em -0.488em 0 -0.46em,
+      -0.749em -0.34em 0 -0.477em;
+  }
+  38% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.377em -0.74em 0 -0.42em,
+      -0.645em -0.522em 0 -0.44em,
+      -0.775em -0.297em 0 -0.46em,
+      -0.82em -0.09em 0 -0.477em;
+  }
+  100% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+}
+
+@keyframes round {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle25.module.css b/src/loaders/circle/circle25.module.css
new file mode 100644
index 0000000..21af9c1
--- /dev/null
+++ b/src/loaders/circle/circle25.module.css
@@ -0,0 +1,30 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  background: linear-gradient(0deg, rgba(255, 61, 0, 0.2) 33%, #ff3d00 100%);
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: #263238;
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle26.module.css b/src/loaders/circle/circle26.module.css
new file mode 100644
index 0000000..7069b9e
--- /dev/null
+++ b/src/loaders/circle/circle26.module.css
@@ -0,0 +1,72 @@
+.loader {
+  transform: rotateZ(45deg);
+  perspective: 1000px;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  color: #fff;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  transform: rotateX(70deg);
+  animation: 1s spin linear infinite;
+}
+.loader:after {
+  color: #ff3d00;
+  transform: rotateY(70deg);
+  animation-delay: 0.4s;
+}
+
+@keyframes rotate {
+  0% {
+    transform: translate(-50%, -50%) rotateZ(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotateZ(360deg);
+  }
+}
+
+@keyframes rotateccw {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(-360deg);
+  }
+}
+
+@keyframes spin {
+  0%,
+  100% {
+    box-shadow: 0.2em 0px 0 0px currentcolor;
+  }
+  12% {
+    box-shadow: 0.2em 0.2em 0 0 currentcolor;
+  }
+  25% {
+    box-shadow: 0 0.2em 0 0px currentcolor;
+  }
+  37% {
+    box-shadow: -0.2em 0.2em 0 0 currentcolor;
+  }
+  50% {
+    box-shadow: -0.2em 0 0 0 currentcolor;
+  }
+  62% {
+    box-shadow: -0.2em -0.2em 0 0 currentcolor;
+  }
+  75% {
+    box-shadow: 0px -0.2em 0 0 currentcolor;
+  }
+  87% {
+    box-shadow: 0.2em -0.2em 0 0 currentcolor;
+  }
+}
diff --git a/src/loaders/circle/circle27.module.css b/src/loaders/circle/circle27.module.css
new file mode 100644
index 0000000..32f6013
--- /dev/null
+++ b/src/loaders/circle/circle27.module.css
@@ -0,0 +1,19 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 3px solid #fff;
+  border-right: 3px solid transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle28.module.css b/src/loaders/circle/circle28.module.css
new file mode 100644
index 0000000..63f56fa
--- /dev/null
+++ b/src/loaders/circle/circle28.module.css
@@ -0,0 +1,30 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 4px solid #fff;
+  border-right: 4px solid transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border-bottom: 4px solid #ff3d00;
+  border-left: 4px solid transparent;
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle29.module.css b/src/loaders/circle/circle29.module.css
new file mode 100644
index 0000000..5aef25f
--- /dev/null
+++ b/src/loaders/circle/circle29.module.css
@@ -0,0 +1,31 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 4px solid #fff;
+  border-right: 4px solid transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border-left: 4px solid #ff3d00;
+  border-bottom: 4px solid transparent;
+  animation: rotation 0.5s linear infinite reverse;
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle3.module.css b/src/loaders/circle/circle3.module.css
deleted file mode 100644
index 8d83fca..0000000
--- a/src/loaders/circle/circle3.module.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.loader {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    position: relative;
-    animation: rotate 1s linear infinite
-}
-
-.loader::before {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    inset: 0px;
-    border-radius: 50%;
-    border: 5px solid #FFF;
-    animation: prixClipFix 2s linear infinite;
-}
-
-@keyframes rotate {
-    100% {
-        transform: rotate(360deg)
-    }
-}
-
-@keyframes prixClipFix {
-    0% {
-        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
-    }
-
-    25% {
-        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
-    }
-
-    50% {
-        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
-    }
-
-    75% {
-        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
-    }
-
-    100% {
-        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
-    }
-}
diff --git a/src/loaders/circle/circle30.module.css b/src/loaders/circle/circle30.module.css
new file mode 100644
index 0000000..26e0ad7
--- /dev/null
+++ b/src/loaders/circle/circle30.module.css
@@ -0,0 +1,19 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid;
+  border-color: #ff3d00 transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle31.module.css b/src/loaders/circle/circle31.module.css
new file mode 100644
index 0000000..81989b4
--- /dev/null
+++ b/src/loaders/circle/circle31.module.css
@@ -0,0 +1,21 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 10px solid;
+  border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35)
+    rgba(255, 255, 255, 0.5);
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle32.module.css b/src/loaders/circle/circle32.module.css
new file mode 100644
index 0000000..74cff19
--- /dev/null
+++ b/src/loaders/circle/circle32.module.css
@@ -0,0 +1,24 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 10px solid;
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite alternate;
+}
+@keyframes animloader {
+  0% {
+    border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+  }
+  33% {
+    border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+  }
+  66% {
+    border-color: white white white rgba(255, 255, 255, 0);
+  }
+  100% {
+    border-color: white white white white;
+  }
+}
diff --git a/src/loaders/circle/circle33.module.css b/src/loaders/circle/circle33.module.css
new file mode 100644
index 0000000..497dc0e
--- /dev/null
+++ b/src/loaders/circle/circle33.module.css
@@ -0,0 +1,36 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 10px solid #fff;
+  border-radius: 50%;
+  position: relative;
+  transform: rotate(45deg);
+  box-sizing: border-box;
+}
+.loader::before {
+  content: '';
+  position: absolute;
+  box-sizing: border-box;
+  inset: -10px;
+  border-radius: 50%;
+  border: 10px solid #ff3d00;
+  animation: prixClipFix 2s infinite linear;
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+}
diff --git a/src/loaders/circle/circle34.module.css b/src/loaders/circle/circle34.module.css
new file mode 100644
index 0000000..eb57568
--- /dev/null
+++ b/src/loaders/circle/circle34.module.css
@@ -0,0 +1,34 @@
+.loader {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  background: #fff;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.loader:after {
+  content: '';
+  position: absolute;
+  inset: 8px;
+  margin: auto;
+  background: #222b32;
+  border-radius: 50%;
+}
+.loader:before {
+  content: '';
+  position: absolute;
+  inset: 0px;
+  margin: auto;
+  background: #de3500;
+  animation: crlMugLoader 2s linear infinite alternate;
+}
+@keyframes crlMugLoader {
+  0%,
+  10% {
+    transform: translateY(64px);
+  }
+  90%,
+  100% {
+    transform: translateY(0px);
+  }
+}
diff --git a/src/loaders/circle/circle35.module.css b/src/loaders/circle/circle35.module.css
new file mode 100644
index 0000000..cbe0849
--- /dev/null
+++ b/src/loaders/circle/circle35.module.css
@@ -0,0 +1,38 @@
+.loader {
+  width: 70px;
+  height: 35px;
+  position: relative;
+  overflow: hidden;
+}
+.loader:before {
+  content: '';
+  width: 70px;
+  height: 70px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border: 5px solid #0000;
+  border-color: #fff #fff #0000 #0000;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: rotate 3s ease-in-out infinite;
+  transform: rotate(-200deg);
+}
+@keyframes rotate {
+  0% {
+    border-width: 10px;
+  }
+  25% {
+    border-width: 3px;
+  }
+  50% {
+    transform: rotate(115deg);
+    border-width: 10px;
+  }
+  75% {
+    border-width: 3px;
+  }
+  100% {
+    border-width: 10px;
+  }
+}
diff --git a/src/loaders/circle/circle36.module.css b/src/loaders/circle/circle36.module.css
new file mode 100644
index 0000000..48f5551
--- /dev/null
+++ b/src/loaders/circle/circle36.module.css
@@ -0,0 +1,30 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #fff;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  position: absolute;
+  box-sizing: border-box;
+  left: 20px;
+  top: 31px;
+  border: 10px solid transparent;
+  border-right-color: #fff;
+  transform: rotate(-40deg);
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle37.module.css b/src/loaders/circle/circle37.module.css
new file mode 100644
index 0000000..37a0103
--- /dev/null
+++ b/src/loaders/circle/circle37.module.css
@@ -0,0 +1,31 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-width: 3px;
+  border-style: dashed solid solid dotted;
+  border-color: #ff3d00 #ff3d00 transparent #ff3d00;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 20px;
+  top: 31px;
+  border: 10px solid transparent;
+  border-right-color: #ff3d00;
+  transform: rotate(-40deg);
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle38.module.css b/src/loaders/circle/circle38.module.css
new file mode 100644
index 0000000..6b72610
--- /dev/null
+++ b/src/loaders/circle/circle38.module.css
@@ -0,0 +1,30 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  border: 3px solid;
+  border-color: #de3500 #0000 #fff #0000;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: 1s rotate linear infinite;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  top: 0;
+  left: 0;
+  position: absolute;
+  border: 10px solid transparent;
+  border-bottom-color: #fff;
+  transform: translate(-10px, 19px) rotate(-35deg);
+}
+.loader:after {
+  border-color: #de3500 #0000 #0000 #0000;
+  transform: translate(32px, 3px) rotate(-35deg);
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle39.module.css b/src/loaders/circle/circle39.module.css
new file mode 100644
index 0000000..011047f
--- /dev/null
+++ b/src/loaders/circle/circle39.module.css
@@ -0,0 +1,31 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+  border-width: 3px 2px 3px 2px;
+  border-style: solid dotted solid dotted;
+  border-color: #de3500 rgba(255, 255, 255, 0.3) #fff rgba(151, 107, 93, 0.3);
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: 1s rotate linear infinite;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  top: 0;
+  left: 0;
+  position: absolute;
+  border: 10px solid transparent;
+  border-bottom-color: #fff;
+  transform: translate(-10px, 19px) rotate(-35deg);
+}
+.loader:after {
+  border-color: #de3500 #0000 #0000 #0000;
+  transform: translate(32px, 3px) rotate(-35deg);
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle40.module.css b/src/loaders/circle/circle40.module.css
new file mode 100644
index 0000000..4071e66
--- /dev/null
+++ b/src/loaders/circle/circle40.module.css
@@ -0,0 +1,20 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  background: #fff;
+  display: inline-block;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: animloader 1s ease-in infinite;
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
diff --git a/src/loaders/circle/circle41.module.css b/src/loaders/circle/circle41.module.css
new file mode 100644
index 0000000..38c1447
--- /dev/null
+++ b/src/loaders/circle/circle41.module.css
@@ -0,0 +1,33 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader::after,
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #fff;
+  position: absolute;
+  left: 0;
+  top: 0;
+  animation: animloader 2s linear infinite;
+}
+.loader::after {
+  animation-delay: 1s;
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
diff --git a/src/loaders/circle/circle42.module.css b/src/loaders/circle/circle42.module.css
new file mode 100644
index 0000000..c8f33fd
--- /dev/null
+++ b/src/loaders/circle/circle42.module.css
@@ -0,0 +1,34 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+.loader::after,
+.loader::before {
+  content: '';
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #fff;
+  position: absolute;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+  animation: animloader 2s ease-in-out infinite;
+}
+.loader::after {
+  animation-delay: 1s;
+}
+
+@keyframes animloader {
+  0%,
+  100% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
diff --git a/src/loaders/circle/circle43.module.css b/src/loaders/circle/circle43.module.css
new file mode 100644
index 0000000..6d112bd
--- /dev/null
+++ b/src/loaders/circle/circle43.module.css
@@ -0,0 +1,56 @@
+.loader {
+  font-size: 48px;
+  color: #fff;
+  width: 1em;
+  height: 1em;
+  box-sizing: border-box;
+  background-color: currentcolor;
+  position: relative;
+  border-radius: 50%;
+  transform: rotateX(-60deg) perspective(1000px);
+}
+.loader:before,
+.loader:after {
+  content: '';
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: inherit;
+  height: inherit;
+  border-radius: inherit;
+  animation: flowerFlow 1s ease-out infinite;
+}
+.loader:after {
+  animation-delay: 0.4s;
+}
+
+@keyframes flowerFlow {
+  0% {
+    opacity: 1;
+    transform: rotate(0deg);
+    box-shadow:
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(180deg);
+    box-shadow:
+      -1em -1em 0 -0.35em currentcolor,
+      0 -1.5em 0 -0.35em currentcolor,
+      1em -1em 0 -0.35em currentcolor,
+      -1.5em 0 0 -0.35em currentcolor,
+      1.5em -0 0 -0.35em currentcolor,
+      -1em 1em 0 -0.35em currentcolor,
+      0 1.5em 0 -0.35em currentcolor,
+      1em 1em 0 -0.35em currentcolor;
+  }
+}
diff --git a/src/loaders/circle/circle44.module.css b/src/loaders/circle/circle44.module.css
new file mode 100644
index 0000000..c554d5a
--- /dev/null
+++ b/src/loaders/circle/circle44.module.css
@@ -0,0 +1,66 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  position: relative;
+}
+.loader::before,
+.loader::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 48em;
+  height: 48em;
+  background-image:
+    radial-gradient(circle 10px, #fff 100%, transparent 0),
+    radial-gradient(circle 10px, #fff 100%, transparent 0),
+    radial-gradient(circle 10px, #fff 100%, transparent 0),
+    radial-gradient(circle 10px, #fff 100%, transparent 0),
+    radial-gradient(circle 10px, #fff 100%, transparent 0),
+    radial-gradient(circle 10px, #fff 100%, transparent 0),
+    radial-gradient(circle 10px, #fff 100%, transparent 0),
+    radial-gradient(circle 10px, #fff 100%, transparent 0);
+  background-position:
+    0em -18em,
+    0em 18em,
+    18em 0em,
+    -18em 0em,
+    13em -13em,
+    -13em -13em,
+    13em 13em,
+    -13em 13em;
+  background-repeat: no-repeat;
+  font-size: 0.5px;
+  border-radius: 50%;
+  animation: blast 1s ease-in infinite;
+}
+.loader::after {
+  font-size: 1px;
+  background: #fff;
+  animation: bounce 1s ease-in infinite;
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    font-size: 0.75px;
+  }
+  50% {
+    font-size: 1.5px;
+  }
+}
+@keyframes blast {
+  0%,
+  40% {
+    font-size: 0.5px;
+  }
+  70% {
+    opacity: 1;
+    font-size: 4px;
+  }
+  100% {
+    font-size: 6px;
+    opacity: 0;
+  }
+}
diff --git a/src/loaders/circle/circle45.module.css b/src/loaders/circle/circle45.module.css
new file mode 100644
index 0000000..4143873
--- /dev/null
+++ b/src/loaders/circle/circle45.module.css
@@ -0,0 +1,45 @@
+.loader {
+  width: calc(100px - 24px);
+  height: 50px;
+  position: relative;
+  animation: flippx 2s infinite linear;
+}
+.loader:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  transform-origin: -24px 50%;
+  animation: spin 1s infinite linear;
+}
+.loader:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+}
+
+@keyframes flippx {
+  0%,
+  49% {
+    transform: scaleX(1);
+  }
+  50%,
+  100% {
+    transform: scaleX(-1);
+  }
+}
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle46.module.css b/src/loaders/circle/circle46.module.css
new file mode 100644
index 0000000..8920720
--- /dev/null
+++ b/src/loaders/circle/circle46.module.css
@@ -0,0 +1,46 @@
+.loader {
+  position: relative;
+  margin: auto;
+  box-sizing: border-box;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  border: 4px solid rgba(255, 255, 255, 0.1);
+  transform-origin: 50% 50%;
+  transform: perspective(200px) rotateX(66deg);
+  animation: spinner-wiggle 1.2s infinite;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: 4px solid #0000;
+  animation:
+    spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite,
+    spinner-fade 1.2s linear infinite;
+}
+.loader:before {
+  border-top-color: #fff;
+}
+.loader:after {
+  border-top-color: #ff3d00;
+  animation-delay: 0.4s;
+}
+
+@keyframes spinner-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-fade {
+  25%,
+  75% {
+    opacity: 0.1;
+  }
+  50% {
+    opacity: 1;
+  }
+}
diff --git a/src/loaders/circle/circle47.module.css b/src/loaders/circle/circle47.module.css
new file mode 100644
index 0000000..437f018
--- /dev/null
+++ b/src/loaders/circle/circle47.module.css
@@ -0,0 +1,40 @@
+.loader {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(
+    165deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgb(220, 220, 220) 40%,
+    rgb(170, 170, 170) 98%,
+    rgb(10, 10, 10) 100%
+  );
+  border-radius: 50%;
+  position: relative;
+}
+
+.loader:before {
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  border-bottom: 0 solid #ffffff05;
+  box-shadow:
+    0 -10px 20px 20px #ffffff40 inset,
+    0 -5px 15px 10px #ffffff50 inset,
+    0 -2px 5px #ffffff80 inset,
+    0 -3px 2px #ffffffbb inset,
+    0 2px 0px #ffffff,
+    0 2px 3px #ffffff,
+    0 5px 5px #ffffff90,
+    0 10px 15px #ffffff60,
+    0 10px 20px 20px #ffffff40;
+  filter: blur(3px);
+  animation: 2s rotate linear infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle48.module.css b/src/loaders/circle/circle48.module.css
new file mode 100644
index 0000000..1ce08a6
--- /dev/null
+++ b/src/loaders/circle/circle48.module.css
@@ -0,0 +1,53 @@
+.loader {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 6rem;
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  animation: pulsOut 1.8s ease-in-out infinite;
+  filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
+}
+.loader:before {
+  width: 100%;
+  padding-bottom: 100%;
+  box-shadow: inset 0 0 0 1rem #fff;
+  animation-name: pulsIn;
+}
+.loader:after {
+  width: calc(100% - 2rem);
+  padding-bottom: calc(100% - 2rem);
+  box-shadow: 0 0 0 0 #fff;
+}
+
+@keyframes pulsIn {
+  0% {
+    box-shadow: inset 0 0 0 1rem #fff;
+    opacity: 1;
+  }
+  50%,
+  100% {
+    box-shadow: inset 0 0 0 0 #fff;
+    opacity: 0;
+  }
+}
+
+@keyframes pulsOut {
+  0%,
+  50% {
+    box-shadow: 0 0 0 0 #fff;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 1rem #fff;
+    opacity: 1;
+  }
+}
diff --git a/src/loaders/circle/circle49.module.css b/src/loaders/circle/circle49.module.css
new file mode 100644
index 0000000..a495949
--- /dev/null
+++ b/src/loaders/circle/circle49.module.css
@@ -0,0 +1,27 @@
+.loader {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  border-radius: 50%;
+  position: absolute;
+  inset: 0;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
+}
+.loader:after {
+  box-shadow: 0 2px 0 #ff3d00 inset;
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle50.module.css b/src/loaders/circle/circle50.module.css
new file mode 100644
index 0000000..13ff227
--- /dev/null
+++ b/src/loaders/circle/circle50.module.css
@@ -0,0 +1,30 @@
+.loader {
+  display: inline-block;
+  transform: translateZ(1px);
+}
+.loader:after {
+  content: '';
+  display: inline-block;
+  width: 48px;
+  height: 48px;
+  margin: 8px;
+  border-radius: 50%;
+  background: #fff;
+  animation: coin-flip 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+@keyframes coin-flip {
+  0%,
+  100% {
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  0% {
+    transform: rotateY(0deg);
+  }
+  50% {
+    transform: rotateY(1800deg);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  100% {
+    transform: rotateY(3600deg);
+  }
+}
diff --git a/src/loaders/circle/circle51.module.css b/src/loaders/circle/circle51.module.css
new file mode 100644
index 0000000..1f1add6
--- /dev/null
+++ b/src/loaders/circle/circle51.module.css
@@ -0,0 +1,17 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow: -72px 0 #fff inset;
+  }
+  100% {
+    box-shadow: 48px 0 #fff inset;
+  }
+}
diff --git a/src/loaders/circle/circle52.module.css b/src/loaders/circle/circle52.module.css
new file mode 100644
index 0000000..ccc3fa5
--- /dev/null
+++ b/src/loaders/circle/circle52.module.css
@@ -0,0 +1,36 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  position: relative;
+  perspective: 500px;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 24px;
+  height: 48px;
+  background: #ff3d00;
+  border-radius: 0 24px 24px 0;
+  transform-origin: 0 0;
+  animation: flip 2s linear infinite alternate;
+}
+.loader:after {
+  left: 0;
+  border-radius: 24px 0 0 24px;
+  transform-origin: 100% 0;
+  animation-delay: 1s;
+}
+
+@keyframes flip {
+  0%,
+  10% {
+    transform: rotateY(0deg);
+  }
+  90%,
+  100% {
+    transform: rotateY(-180deg);
+  }
+}
diff --git a/src/loaders/circle/circle53.module.css b/src/loaders/circle/circle53.module.css
new file mode 100644
index 0000000..49df633
--- /dev/null
+++ b/src/loaders/circle/circle53.module.css
@@ -0,0 +1,29 @@
+.loader {
+  position: relative;
+  border: 24px solid #0000;
+  border-radius: 50%;
+  animation: piefill 2s linear infinite;
+}
+
+@keyframes piefill {
+  0%,
+  19% {
+    border-color: #0000 #0000 #0000 #0000;
+  }
+  20%,
+  39% {
+    border-color: #fff #0000 #0000 #0000;
+  }
+  40%,
+  59% {
+    border-color: #fff #fff #0000 #0000;
+  }
+  60%,
+  79% {
+    border-color: #fff #fff #fff #0000;
+  }
+  80%,
+  100% {
+    border-color: #fff #fff #fff #fff;
+  }
+}
diff --git a/src/loaders/circle/circle54.module.css b/src/loaders/circle/circle54.module.css
new file mode 100644
index 0000000..3c22e32
--- /dev/null
+++ b/src/loaders/circle/circle54.module.css
@@ -0,0 +1,30 @@
+.loader {
+  position: relative;
+  border: 24px solid #fff;
+  border-radius: 50%;
+  transform: rotate(45deg);
+  animation: pieFill 3s linear infinite;
+}
+
+@keyframes pieFill {
+  0%,
+  19% {
+    border-color: #fff #fff #fff #fff;
+  }
+  20%,
+  39% {
+    border-color: #ff3d00 #fff #fff #fff;
+  }
+  40%,
+  59% {
+    border-color: #ff3d00 #ff3d00 #fff #fff;
+  }
+  60%,
+  79% {
+    border-color: #ff3d00 #ff3d00 #ff3d00 #fff;
+  }
+  80%,
+  100% {
+    border-color: #ff3d00 #ff3d00 #ff3d00 #ff3d00;
+  }
+}
diff --git a/src/loaders/circle/circle55.module.css b/src/loaders/circle/circle55.module.css
new file mode 100644
index 0000000..92e2ff0
--- /dev/null
+++ b/src/loaders/circle/circle55.module.css
@@ -0,0 +1,35 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: relative;
+  transform: rotate(45deg);
+  background: #fff;
+}
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 24px solid #ff3d00;
+  animation: prixClipFix 2s infinite linear;
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+}
diff --git a/src/loaders/circle/circle56.module.css b/src/loaders/circle/circle56.module.css
new file mode 100644
index 0000000..c12540a
--- /dev/null
+++ b/src/loaders/circle/circle56.module.css
@@ -0,0 +1,18 @@
+.loader {
+  border: 24px solid #fff;
+  border-bottom-color: #ff3d00;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle57.module.css b/src/loaders/circle/circle57.module.css
new file mode 100644
index 0000000..705cb76
--- /dev/null
+++ b/src/loaders/circle/circle57.module.css
@@ -0,0 +1,31 @@
+.loader {
+  border: 2px solid #fff;
+  width: 48px;
+  height: 48px;
+  background: #ff3d00;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 2s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border: 24px solid;
+  border-color: transparent #fff;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle58.module.css b/src/loaders/circle/circle58.module.css
new file mode 100644
index 0000000..b625914
--- /dev/null
+++ b/src/loaders/circle/circle58.module.css
@@ -0,0 +1,24 @@
+.loader {
+  border: 24px solid #fff;
+  border-color: #ff3d00 #ff3d00 #fff #fff;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite;
+}
+
+.loader:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -125%);
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border-radius: 50%;
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle59.module.css b/src/loaders/circle/circle59.module.css
new file mode 100644
index 0000000..3329d1d
--- /dev/null
+++ b/src/loaders/circle/circle59.module.css
@@ -0,0 +1,41 @@
+.loader {
+  position: relative;
+  width: 64px;
+  height: 60px;
+}
+.loader::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #fff;
+  width: 64px;
+  height: 32px;
+  border-radius: 0 0 50px 50px;
+  animation: move 0.5s linear infinite alternate;
+}
+.loader::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  background: #ff3d00;
+  width: 24px;
+  height: 24px;
+  transform: translateX(-50%) rotate(0deg);
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}
+@keyframes move {
+  0% {
+    transform: rotate(10deg);
+  }
+  100% {
+    transform: rotate(-10deg);
+  }
+}
diff --git a/src/loaders/circle/circle60.module.css b/src/loaders/circle/circle60.module.css
new file mode 100644
index 0000000..a39495a
--- /dev/null
+++ b/src/loaders/circle/circle60.module.css
@@ -0,0 +1,33 @@
+.loader {
+  width: 64px;
+  height: 64px;
+  position: relative;
+  animation: rotate 1.5s ease-in infinite alternate;
+}
+.loader::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  color: #ff3d00;
+  background: currentColor;
+  width: 64px;
+  height: 32px;
+  border-radius: 0 0 50px 50px;
+}
+.loader::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 10%;
+  background: #fff;
+  width: 8px;
+  height: 64px;
+  animation: rotate 1.2s linear infinite alternate-reverse;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle61.module.css b/src/loaders/circle/circle61.module.css
new file mode 100644
index 0000000..e8e1a6a
--- /dev/null
+++ b/src/loaders/circle/circle61.module.css
@@ -0,0 +1,22 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  background: #fff;
+  border-radius: 50%;
+  position: relative;
+  animation: skLinRotate 1s ease-in-out infinite alternate;
+}
+.loader:after {
+  content: '';
+  position: absolute;
+  inset: 5px;
+  border-radius: 50%;
+  border: 5px solid transparent;
+  border-top-color: #ff3d00;
+}
+@keyframes skLinRotate {
+  95%,
+  100% {
+    transform: rotate(840deg);
+  }
+}
diff --git a/src/loaders/circle/circle62.module.css b/src/loaders/circle/circle62.module.css
new file mode 100644
index 0000000..acc779b
--- /dev/null
+++ b/src/loaders/circle/circle62.module.css
@@ -0,0 +1,24 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  background: #fff;
+  border-radius: 50%;
+  position: relative;
+  animation: roll 1s ease-in-out infinite alternate;
+}
+.loader:after {
+  content: '';
+  position: absolute;
+  inset: 5px;
+  border-radius: 50%;
+  border: 5px solid;
+  border-color: #ff3d00 transparent;
+}
+@keyframes roll {
+  0% {
+    transform: translateX(-150%) rotate(0deg);
+  }
+  100% {
+    transform: translateX(150%) rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle63.module.css b/src/loaders/circle/circle63.module.css
new file mode 100644
index 0000000..938eccd
--- /dev/null
+++ b/src/loaders/circle/circle63.module.css
@@ -0,0 +1,34 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  background: #fff;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 6px;
+  top: 10px;
+  width: 12px;
+  height: 12px;
+  color: #ff3d00;
+  background: currentColor;
+  border-radius: 50%;
+  box-shadow:
+    25px 2px,
+    10px 22px;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle64.module.css b/src/loaders/circle/circle64.module.css
new file mode 100644
index 0000000..e397c2a
--- /dev/null
+++ b/src/loaders/circle/circle64.module.css
@@ -0,0 +1,32 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 4px solid;
+  background: rgba(255, 255, 255, 0.2);
+  border-color: transparent #fff #fff transparent;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s ease-in-out infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border: 12px solid;
+  border-color: transparent #ff3d00 #ff3d00 transparent;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle65.module.css b/src/loaders/circle/circle65.module.css
new file mode 100644
index 0000000..634dc9c
--- /dev/null
+++ b/src/loaders/circle/circle65.module.css
@@ -0,0 +1,31 @@
+.loader {
+  border: 2px solid;
+  border-color: transparent #fff;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 2s linear infinite;
+}
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border: 24px solid;
+  border-color: transparent rgba(255, 255, 255, 0.15);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/loaders/circle/circle66.module.css b/src/loaders/circle/circle66.module.css
new file mode 100644
index 0000000..5543608
--- /dev/null
+++ b/src/loaders/circle/circle66.module.css
@@ -0,0 +1,28 @@
+.loader {
+  border: 24px solid;
+  border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35)
+    rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite;
+}
+
+@keyframes animloader {
+  0% {
+    border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35)
+      rgba(255, 255, 255, 0.75);
+  }
+  33% {
+    border-color: rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25)
+      rgba(255, 255, 255, 0.35);
+  }
+  66% {
+    border-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15)
+      rgba(255, 255, 255, 0.25);
+  }
+  100% {
+    border-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75)
+      rgba(255, 255, 255, 0.15);
+  }
+}
diff --git a/src/loaders/circle/circle67.module.css b/src/loaders/circle/circle67.module.css
new file mode 100644
index 0000000..199558f
--- /dev/null
+++ b/src/loaders/circle/circle67.module.css
@@ -0,0 +1,29 @@
+.loader {
+  width: 64px;
+  height: 64px;
+  position: relative;
+  border-radius: 50%;
+  box-shadow: -10px 8px 0 18px inset #fff;
+  animation: rotate 2s ease-in infinite alternate;
+}
+.loader::before {
+  content: '';
+  position: absolute;
+  left: 14px;
+  bottom: 16px;
+  background: #ff3d00;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  animation: scale 1s ease-in infinite alternate;
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(750deg);
+  }
+}
+@keyframes scale {
+  100% {
+    transform: scale(0.5) translateY(5px);
+  }
+}
diff --git a/src/loaders/circle/circle68.module.css b/src/loaders/circle/circle68.module.css
new file mode 100644
index 0000000..97c75d1
--- /dev/null
+++ b/src/loaders/circle/circle68.module.css
@@ -0,0 +1,49 @@
+.loader {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+.loader:before {
+  content: '';
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  top: 50%;
+  left: 0;
+  transform: translate(-5px, -50%);
+  background: linear-gradient(to right, #fff 50%, #de3500 50%) no-repeat;
+  background-size: 200% auto;
+  background-position: 100% 0;
+  animation: colorBallMoveX 1.5s linear infinite alternate;
+}
+.loader:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  width: 2px;
+  height: 100%;
+  background: #de3500;
+}
+@keyframes colorBallMoveX {
+  0% {
+    background-position: 0% 0;
+    transform: translate(-15px, -50%);
+  }
+  15%,
+  25% {
+    background-position: 0% 0;
+    transform: translate(0px, -50%);
+  }
+  75%,
+  85% {
+    background-position: 100% 0;
+    transform: translate(50px, -50%);
+  }
+  100% {
+    background-position: 100% 0;
+    transform: translate(65px, -50%);
+  }
+}
diff --git a/src/loaders/circle/index.ts b/src/loaders/circle/index.ts
index 02858d1..d8368ce 100644
--- a/src/loaders/circle/index.ts
+++ b/src/loaders/circle/index.ts
@@ -1,5 +1,5 @@
-import { getDynamicStyle } from "util";
+import { getDynamicStyle } from '../../util';
 const styleModules = import.meta.glob('./*.module.css');
 const rawModules = import.meta.glob('./*.module.css', { as: 'raw' });
 
-export const loadCircleStyles = getDynamicStyle(styleModules, rawModules);
\ No newline at end of file
+export const loadCircleStyles = getDynamicStyle(styleModules, rawModules);
diff --git a/src/loaders/dot/index.ts b/src/loaders/dot/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/loaders/index.ts b/src/loaders/index.ts
index 654f470..dae6530 100644
--- a/src/loaders/index.ts
+++ b/src/loaders/index.ts
@@ -2,7 +2,11 @@ export const LOADERS = [
   {
     name: 'circle',
     order: 1,
-    length: 5,
-    loadStyles: () => import('./circle').then(m => m.loadCircleStyles()),
+    loadStyles: () => import('./circle').then((m) => m.loadCircleStyles()),
+  },
+  {
+    name: 'bubble',
+    order: 2,
+    loadStyles: () => import('./bubble').then((m) => m.loadBubbleStyles()),
   },
 ];
diff --git a/src/main.tsx b/src/main.tsx
index 46c0846..631e96a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.scss'
-import App from './App.tsx'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.scss';
+import App from './App.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+  </StrictMode>
+);
diff --git a/src/util/getDynamicStyle.ts b/src/util/getDynamicStyle.ts
index b5b4bc2..f91d606 100644
--- a/src/util/getDynamicStyle.ts
+++ b/src/util/getDynamicStyle.ts
@@ -2,20 +2,16 @@ export function getDynamicStyle(
   styleModules: Record<string, () => Promise<unknown>>,
   rawModules: Record<string, () => Promise<string>>
 ) {
-//   const allStyles: { styles: CSSModuleClasses; raw: string }[] = [];
-
   const loadStyleFiles = async () => {
     const entries = Object.keys(styleModules)
       .sort()
       .map(async (path) => {
-        const [stylesMod, rawMod] = await Promise.all([
-          styleModules[path](),
-          rawModules[path](),
-        ]);
+        const [stylesMod, rawMod] = await Promise.all([styleModules[path](), rawModules[path]()]);
 
         return {
           styles: (stylesMod as { default: CSSModuleClasses }).default,
           raw: rawMod,
+          fileName: path.replace(/.*\//, ''), // Extract file name from path
         };
       });
 
@@ -24,12 +20,11 @@ export function getDynamicStyle(
   };
 
   return async function loadDynamicStyles() {
-      const allStyles: { styles: CSSModuleClasses; raw: string }[] = [];
+    const allStyles: { styles: CSSModuleClasses; raw: string }[] = [];
 
     if (allStyles.length === 0) {
       const loaded = await loadStyleFiles();
       allStyles.push(...loaded);
-      console.log('Circle styles loaded:', allStyles);
     }
     return allStyles;
   };
diff --git a/src/util/index.ts b/src/util/index.ts
index c0d275b..8dab593 100644
--- a/src/util/index.ts
+++ b/src/util/index.ts
@@ -1,6 +1,3 @@
 import { getDynamicStyle } from '../util/getDynamicStyle';
 
-export {
-    getDynamicStyle
-}
-
+export { getDynamicStyle };
