{"id":15292078,"url":"https://github.com/harshdev1809/fun-ui","last_synced_at":"2026-01-02T02:36:51.083Z","repository":{"id":254105414,"uuid":"845466210","full_name":"HarshDev1809/Fun-Ui","owner":"HarshDev1809","description":"Fun UI is a lightweight React Component Library designed to bring a playful and engaging experience to your web applications.","archived":false,"fork":false,"pushed_at":"2024-08-30T23:45:44.000Z","size":7048,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-24T18:39:58.421Z","etag":null,"topics":["javascript","node","npm","npm-package"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@moj-ui/fun-ui","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HarshDev1809.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-21T10:03:57.000Z","updated_at":"2024-09-09T20:47:38.000Z","dependencies_parsed_at":"2024-10-27T08:52:25.003Z","dependency_job_id":null,"html_url":"https://github.com/HarshDev1809/Fun-Ui","commit_stats":null,"previous_names":["harshdev1809/fun-ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarshDev1809%2FFun-Ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarshDev1809%2FFun-Ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarshDev1809%2FFun-Ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarshDev1809%2FFun-Ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HarshDev1809","download_url":"https://codeload.github.com/HarshDev1809/Fun-Ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242902516,"owners_count":20204119,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","node","npm","npm-package"],"created_at":"2024-09-30T16:16:26.488Z","updated_at":"2026-01-02T02:36:51.033Z","avatar_url":"https://github.com/HarshDev1809.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fun UI\n\n`Fun UI` is a lightweight React Component Library designed to bring a playful and engaging experience to your web applications. With a focus on creative and fun emoticon-based components, `Fun UI` allows developers to add a personal touch to their interfaces effortlessly. Perfect for projects that aim to stand out with unique and interactive elements, `Fun UI` is both easy to use and highly customizable.\n\n## Table of Contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Usage Demo](#usage-demo)\n- [Components](#components)\n  - [Loader](#1-loader)\n    - [Face Loader](#--face-loader)\n      - [Usage](#usage)\n      - [Customisation](#customisation)\n      - [Variants](#variants)\n    - [Classic Loader](#--classic-loader)\n      - [Usage](#usage)\n      - [Customisation](#customisation)\n      - [Variants](#variants)\n    - [Sand Watch Loader](#--sand-watch-loader)\n      - [Usage](#usage)\n      - [Customisation](#customisation)\n      - [Variants](#variants)\n  - [Emoticons](#2-emoticons)\n    - [Classic Emoticons](#--classic-emoticons)\n    - [Face Emoticons](#--face-emoticons)\n- [License](#license)\n- [Contributing](#contributing)\n\n## Features\n\n- **Playful Emoticons:** Inject fun and personality into your website with a wide range of emoticon-based components.\n- **Customizable:** Tailor the components to match your brand’s style and preferences.\n- **Seamless Integration:** Easily integrate components into your project with minimal setup.\n\n## Installation\n\nTo install the package, use npm:\n\n```bash\nnpm install @moj-ui/fun-ui\n```\n\n## Usage Demo\n\nA basic example of `\u003cFaceLoader /\u003e` from `@moj-ui/fun-ui`.\n\n```javascript\nimport { FaceLoader } from \"@moj-ui/fun-ui\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cFaceLoader\n        variant={1}\n        caption={\"Looking for Data...\"}\n        captionStyle={{ fontSize: \"0.35em\" }}\n        time={1000}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n### Output :\n\n![Face Loader example](assets/gifs/loaders/FaceLoader/FaceLoader1.gif)\n\n## Components\n\n### 1. Loader:\n\nA collection of fun Loaders built using emoticons which adds an enjoyable touch to your React application.\n\n#### - Face Loader:\n\nCollections of exciting Loaders consisting of face emoticons.\n\n##### Usage:\n\nTo use Face Loader component, you can import `\u003cFaceLoader /\u003e` from `@moj-ui/fun-ui` and use it in your app.\n\n```javascript\nimport { FaceLoader } from \"@moj-ui/fun-ui\";\n```\n\nBasic usage eg:\n\n```javascript\nimport { FaceLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cFaceLoader /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Demo;\n```\n\n**Output:**\n![Face Loader Basic output gif](assets/gifs/loaders/FaceLoader/FaceLoaderBasic.gif)\n\n##### Customisation:\n\nYou can use in built attritbutes to customise loader according to your personal touch.\n\n###### Attributes:\n\n1. **variant:** You can use `variant` attribute to choose from various Variants available according to you want. The `default` value is `1`. Choose the index of the loader you want to choose. Click [here](#face-loader-variants) to see the available Face Loaders.\n\neg:\n\n```javascript\nimport { FaceLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cFaceLoader variant={20} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n![Face Loader gif](assets/gifs/loaders/FaceLoader/FacLoaderUsage1.gif)\n\n2. **time:** You can change the time interval of loader using `time` attribute. The `time` takes time in `ms`. The `default` value is `2000` ms. Remember `1 s = 1000 ms`.\n\neg :\n\nTo set time interval to 1 sec.\n\n```javascript\nimport { FaceLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cFaceLoader time={1000} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemo1000](assets/gifs/loaders/FaceLoader/FaceLoaderUsage1000.gif)\n\nTo set time interval to 3 sec.\n\n```javascript\nimport { FaceLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cFaceLoader time={3000} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemo3000](assets/gifs/loaders/FaceLoader/FaceLoaderUsage3000.gif)\n\n3. **style:** you can use custom CSS according to you need.\n\neg:\n\nTo increase the size \u0026 colour of the loader, you can pass an object in `style` attribute.\n\n```javascript\nconst newStyle = {\n  color: \"green\", // To change the color to green.\n  fontSize: \"6em\", // To change the size of Loader to 6em.\n};\n```\n\nComplete Code :\n\n```javascript\nimport { FaceLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  const newStyle = {\n    color: \"green\",\n    fontSize: \"6em\",\n  };\n\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cFaceLoader style={newStyle} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemoStyle](assets/gifs/loaders/FaceLoader/FaceLoaderUsageStyle.gif)\n\nThe Default `style` is:\n\n- color : grey\n- size : 4rem\n\n4. **caption:** You can add a caption to you loader to make it even more personal.\n\neg:\n\nTo add caption `Looking for Data...`\n\n```javascript\nimport { FaceLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cFaceLoader caption={\"Looking for Data...\"} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemoCaption](assets/gifs/loaders/FaceLoader/FaceLoader1.gif)\n\nThe default value of `caption` is `none`.\n\nyou can use `captionStyle` property to customise caption according to your need.\n\n```javascript\nimport { FaceLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  const newStyle = {\n    color: \"green\",\n    fontSize: \"2em\",\n  };\n\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cFaceLoader caption={\"Looking for Data...\"} captionStyle={newStyle} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemoCaptionStyle](assets/gifs/loaders/FaceLoader/FaceLoaderCaptionStyle.gif)\n\nthe default style of caption is:\n\n- color : grey\n- size : 0.35em\n\n##### Variants\n\n| Variant |    Loader     |                              Output                              |\n| :-----: | :-----------: | :--------------------------------------------------------------: |\n|    1    |     (0_0)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader1.gif)  |\n|    2    |  (`~`0_0`~`)  | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader2.gif)  |\n|    3    |  (`*`0_0`*`)  | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader3.gif)  |\n|    4    |    ( !0_0)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader4.gif)  |\n|    5    |     (o_o)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader5.gif)  |\n|    6    |  (`~`o_o`~`)  | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader6.gif)  |\n|    7    |   (\\*o_o\\*)   | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader7.gif)  |\n|    8    |    ( !o_o)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader8.gif)  |\n|    9    |     (O_O)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader9.gif)  |\n|   10    |  (`~`O_O`~`)  | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader10.gif) |\n|   11    |   (\\*O_O\\*)   | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader11.gif) |\n|   12    |    ( !O_O)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader12.gif) |\n|   13    |    (^\\_^)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader13.gif) |\n|   14    | (`~`^\\_^`~`)  | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader14.gif) |\n|   15    |  (\\*^\\_^\\*)   | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader15.gif) |\n|   16    |   ( !^\\_^)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader16.gif) |\n|   17    |     (^.^)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader17.gif) |\n|   18    |  (`~`^.^`~`)  | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader18.gif) |\n|   19    |   (\\*^.^\\*)   | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader19.gif) |\n|   20    |    ( !^.^)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader20.gif) |\n|   21    |    (-\\_-)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader21.gif) |\n|   22    |   ( !-\\_-)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader22.gif) |\n|   23    |     (T_T)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader23.gif) |\n|   24    |   (\\*\\_\\*)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader24.gif) |\n|   25    |    (\\*o\\*)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader25.gif) |\n|   26    |    (\\*.\\*)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader26.gif) |\n|   27    |    (\u003e\\_\u003c)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader27.gif) |\n|   28    |    (\"\\_\")     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader28.gif) |\n|   29    |   ( !\"\\_\")    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader29.gif) |\n|   30    |    (=\\_=)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader30.gif) |\n|   31    |   ( !=\\_=)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader31.gif) |\n|   32    |     (U_U)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader32.gif) |\n|   33    |  (`~`U_U`~`)  | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader33.gif) |\n|   34    |   (\\*U_U\\*)   | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader34.gif) |\n|   35    |    ( !U_U)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader35.gif) |\n|   36    |     (V_V)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader36.gif) |\n|   37    |  (`~`V_V`~`)  | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader37.gif) |\n|   38    |   (\\*V_V\\*)   | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader38.gif) |\n|   39    |    ( !V_V)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader39.gif) |\n|   40    |     (U.U)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader40.gif) |\n|   41    |  (`~`U.U`~`)  | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader41.gif) |\n|   42    |   (\\*U.U\\*)   | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader42.gif) |\n|   43    |    ( !U.U)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader43.gif) |\n|   44    |  (`$`\\_`$`)   | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader44.gif) |\n|   45    |     (X_X)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader45.gif) |\n|   46    |    ( !X_X)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader46.gif) |\n|   47    |     (x_x)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader47.gif) |\n|   48    |    ( !x_x)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader48.gif) |\n|   49    |    (+\\_+)     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader49.gif) |\n|   50    |   ( !+\\_+)    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader50.gif) |\n|   51    |    ('\\_')     | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader51.gif) |\n|   52    | (`~`'\\_'`~`)  | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader52.gif) |\n|   53    |  (\\*'\\_'\\*)   | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader53.gif) |\n|   54    |   ( !'\\_')    | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader54.gif) |\n|   55    | (O*O) - (-*-) | ![FaceLoader1](assets/gifs//loaders/FaceLoader/FaceLoader55.gif) |\n\n#### - Classic Loader:\n\nCollection of Classic Loaders built using Emoticons.\n\n##### Usage\n\nTo use Classic Loader component, you can import `\u003cClassicLoader /\u003e` from `@moj-ui/fun-ui` and use it in your app.\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n```\n\nBasic usage eg:\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Demo;\n```\n\n**Output:**\n![Classic Loader Basic output gif](assets/gifs/loaders/FaceLoader/FaceLoaderBasic.gif)\n\n##### Customisation:\n\nYou can use in built attritbutes to customise loader according to your personal touch.\n\n###### Attributes:\n\n1. **variant:** You can use `variant` attribute to choose from various Variants available according to you want. The `default` value is `1`. Choose the index of the loader you want to choose. Click [here](#classic-loader-variants) to see the available Face Loaders.\n\neg:\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader variant={1} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n![Face Loader gif](assets/gifs/loaders/FaceLoader/FacLoaderUsage1.gif)\n\n2. **time:** You can change the time interval of loader using `time` attribute. The `time` takes time in `ms`. The `default` value is `2000` ms. Remember `1 s = 1000 ms`.\n\neg :\n\nTo set time interval to 1 sec.\n\n```javascript\nimport { Classicloader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader time={1000} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemo1000](assets/gifs/loaders/FaceLoader/FaceLoaderUsage1000.gif)\n\nTo set time interval to 3 sec.\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader time={3000} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemo3000](assets/gifs/loaders/FaceLoader/FaceLoaderUsage3000.gif)\n\n3. **style:** you can use custom CSS according to you need.\n\neg:\n\nTo increase the size \u0026 colour of the loader, you can pass an object in `style` attribute.\n\n```javascript\nconst newStyle = {\n  color: \"green\", // To change the color to green.\n  fontSize: \"6em\", // To change the size of Loader to 6em.\n};\n```\n\nComplete Code :\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  const newStyle = {\n    color: \"green\",\n    fontSize: \"6em\",\n  };\n\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader style={newStyle} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemoStyle](assets/gifs/loaders/FaceLoader/FaceLoaderUsageStyle.gif)\n\nThe Default `style` is:\n\n- color : grey\n- size : 4rem\n\n4. **caption:** You can add a caption to you loader to make it even more personal.\n\neg:\n\nTo add caption `Waiting...`\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader caption={\"Waiting...\"} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemoCaption](assets/gifs/loaders/FaceLoader/FaceLoader1.gif)\n\nThe default value of `caption` is `none`.\n\nyou can use `captionStyle` property to customise caption according to your need.\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  const newStyle = {\n    color: \"green\",\n    fontSize: \"2em\",\n  };\n\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader caption={\"Waiting...\"} captionStyle={newStyle} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemoCaptionStyle](assets/gifs/loaders/FaceLoader/FaceLoaderCaptionStyle.gif)\n\nthe default style of caption is:\n\n- color : grey\n- size : 0.35em\n\n#### - Sand Watch Loader:\n\nAdd an emoticon Sand Watch as a loader to add an unique touch to your loading screen. [Click here](src/components/Loader/GlassWatchLoader) to know more.\n\n##### Usage\n\nTo use Classic Loader component, you can import `\u003cClassicLoader /\u003e` from `@moj-ui/fun-ui` and use it in your app.\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n```\n\nBasic usage eg:\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Demo;\n```\n\n**Output:**\n![Classic Loader Basic output gif](assets/gifs/loaders/FaceLoader/FaceLoaderBasic.gif)\n\n##### Customisation:\n\nYou can use in built attritbutes to customise loader according to your personal touch.\n\n###### Attributes:\n\n1. **variant:** You can use `variant` attribute to choose from various Variants available according to you want. The `default` value is `1`. Choose the index of the loader you want to choose. Click [here](#classic-loader-variants) to see the available Face Loaders.\n\neg:\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader variant={1} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n![Face Loader gif](assets/gifs/loaders/FaceLoader/FacLoaderUsage1.gif)\n\n2. **time:** You can change the time interval of loader using `time` attribute. The `time` takes time in `ms`. The `default` value is `2000` ms. Remember `1 s = 1000 ms`.\n\neg :\n\nTo set time interval to 1 sec.\n\n```javascript\nimport { Classicloader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader time={1000} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemo1000](assets/gifs/loaders/FaceLoader/FaceLoaderUsage1000.gif)\n\nTo set time interval to 3 sec.\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader time={3000} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemo3000](assets/gifs/loaders/FaceLoader/FaceLoaderUsage3000.gif)\n\n3. **style:** you can use custom CSS according to you need.\n\neg:\n\nTo increase the size \u0026 colour of the loader, you can pass an object in `style` attribute.\n\n```javascript\nconst newStyle = {\n  color: \"green\", // To change the color to green.\n  fontSize: \"6em\", // To change the size of Loader to 6em.\n};\n```\n\nComplete Code :\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  const newStyle = {\n    color: \"green\",\n    fontSize: \"6em\",\n  };\n\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader style={newStyle} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemoStyle](assets/gifs/loaders/FaceLoader/FaceLoaderUsageStyle.gif)\n\nThe Default `style` is:\n\n- color : grey\n- size : 4rem\n\n4. **caption:** You can add a caption to you loader to make it even more personal.\n\neg:\n\nTo add caption `Waiting for Data...`\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader caption={\"Waiting for Data...\"} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemoCaption](assets/gifs/loaders/FaceLoader/FaceLoader1.gif)\n\nThe default value of `caption` is `none`.\n\nyou can use `captionStyle` property to customise caption according to your need.\n\n```javascript\nimport { ClassicLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  const newStyle = {\n    color: \"green\",\n    fontSize: \"2em\",\n  };\n\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicLoader caption={\"Waiting for Data...\"} captionStyle={newStyle} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\nOutput:\n[FaceLoaderDemoCaptionStyle](assets/gifs/loaders/FaceLoader/FaceLoaderCaptionStyle.gif)\n\nthe default style of caption is:\n\n- color : grey\n- size : 0.35em\n\n5. **gap:** You can adjust the gap between loader and caption according to your need using `gap`. `gap` takes a number to adjust the distance in `pixels`.\n\neg:\n\nTo add gap of `30px` between caption and loader, use:\n\n```javascript\n\u003cSandWatchLoader caption={\"Waiting for Data...\"} gap={30} /\u003e\n```\n\nComplete example:\n\n```javascript\nimport { SandWatchLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cSandWatchLoader caption={\"Waiting for Data...\"} gap={30} /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Demo;\n```\n\nOutput:\n\n![SandWatchLoadergif]\n\n6. **offSet:** Sometimes loader can be a little asymmetric. Use `offSet` attribute to adjust the loader to be in center. `offSet` takes number to adjust the loader. Default value is `0`.\n\neg:\n\nTo adjust the above loader to align with the caption, use `offset` attribute.\n\n```javascript\n\u003cSandWatchLoader caption={\"Waiting for Data...\"} offSet={20} gap={30} /\u003e\n```\n\noutput :\n![SandWatchLoadergif]\n\nComplete code:\n\n```javascript\nimport { SandWatchLoader } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cSandWatchLoader caption={\"Waiting for Data...\"} offSet={20} gap={30} /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Demo;\n```\n\n##### Variant:\n\n| Variant | Loader  | Output |\n| :-----: | :-----: | :----: |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    2    |  [\u003e=\u003c]  |  gif   |\n|    3    |  ]\u003e=\u003c[  |  gif   |\n|    4    |  I\u003e=\u003cI  |  gif   |\n|    5    |   \u003e=\u003c   |  gif   |\n|    6    | \\|}={\\| |  gif   |\n|    7    |  [}={]  |  gif   |\n|    8    |   }={   |  gif   |\n|    9    | \\|\u003e-\u003c\\| |  gif   |\n|   10    |  [\u003e-\u003c]  |  gif   |\n|   11    |  ]\u003e-\u003c[  |  gif   |\n|   12    |  I\u003e-\u003cI  |  gif   |\n|   13    |   \u003e-\u003c   |  gif   |\n|   14    | \\|}-{\\| |  gif   |\n|   15    |  [}-{]  |  gif   |\n|   16    |   }-{   |  gif   |\n\n### 2. Emoticons:\n\nCollections of Classic emoticons as well as many more. You can choose from many classic as well as fun emoticons to make your React App fun and interactive.\n\n#### - Classic Emoticons:\n\nCollection of Classic emoticons.\n\n##### Usage:\n\nTo use Classic Emoticons, you can import `\u003cClassicEmoticon /\u003e` from `@moj-ui/fun-ui` and use it in your app.\n\n```javascript\nimport { ClassicEmoticon } from \"@moj-ui/fun-ui\";\n```\n\nBasic usage eg:\n\n```javascript\nimport { ClassicEmoticon } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicEmoticon /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Demo;\n```\nOutput:\n[gif]\n\n##### Customisation:\n\nYou can use in-built attributes to customise the emoticons according to your personal touch.\n\n###### Attributes:\n\n 1. **variant:** You can use `variant` attribute to choose from various emoticons available. The `default` value is `1`. Choose the index of the emoticon you want to choose. Click [here](#variants) to see the available emoticons.\n\n eg:\n\n To use the emoticon `:D`, use index `35` in `variant` attribute.\n\n ```javascript\n \u003cClassicEmoticon variant={35}\u003e\n```\n Output:\n [gif]\n\n```javascript\nimport { ClassicEmoticon } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicEmoticon variant={35}/\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Demo;\n```\n\n2. **style:** You can use custom CSS according to your need.\n\neg:\n\nTo increase the size \u0026 colour of the emoticon, you can pass an object in style attribute.\n\n```javascript\nconst newStyle = {\n  color: \"green\", // To change the color to green.\n  fontSize: \"6em\", // To change the size of emoticon to 6em.\n};\n```\n\noutput:\n[gif]\n\nComplete eg:\n\n```javascript\nimport { ClassicEmoticon } from \"@moj-ui/fun-ui\";\n\nfunction Demo() {\n  const newStyle = {\n    color: \"green\",\n    fontSize: \"6em\",\n  };\n\n  return (\n    \u003cdiv className=\"demo\"\u003e\n      \u003cClassicEmoticon style={newStyle} /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Demo;\n```\n\n##### Varianst\n| Variant | Loader  | Output |\n| :-----: | :-----: | :----: |\n|    1    | :-) |  gif   |\n|    1    | :^) |  gif   |\n|    1    | ^_^ |  gif   |\n|    1    | (^ ^) |  gif   |\n|    1    | :,-) |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n|    1    | \\|\u003e=\u003c\\| |  gif   |\n\n\n#### - Face Emoticons:\n\nCollection of Face emoticons to add a fun \u0026 personal touch to your React App. [Click here](src/components/Emoticons/FaceEmoticon) to know more.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharshdev1809%2Ffun-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharshdev1809%2Ffun-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharshdev1809%2Ffun-ui/lists"}