{"id":27149836,"url":"https://github.com/mthaip/tw-epic-spinners","last_synced_at":"2026-05-24T22:04:52.236Z","repository":{"id":233662543,"uuid":"786961580","full_name":"mthaip/tw-epic-spinners","owner":"mthaip","description":"A TailwindCSS Plugin of Epic Spinners.","archived":false,"fork":false,"pushed_at":"2026-03-24T21:03:37.000Z","size":812,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-26T00:20:01.818Z","etag":null,"topics":["animation-css","css","html","javascript","loading-animations","loading-screen","loading-spinner","react","spinners","tailwindcss","tailwindcss-plugin","tailwindcss-v3","tailwindcss-v4","typescript","vue"],"latest_commit_sha":null,"homepage":"https://tw-epic-spinners.mthaip.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mthaip.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-04-15T16:18:46.000Z","updated_at":"2026-03-24T21:01:43.000Z","dependencies_parsed_at":"2024-04-17T02:55:29.588Z","dependency_job_id":"8ea96713-0d8f-47d2-975a-020f230dc455","html_url":"https://github.com/mthaip/tw-epic-spinners","commit_stats":{"total_commits":56,"total_committers":3,"mean_commits":"18.666666666666668","dds":0.3214285714285714,"last_synced_commit":"0f41adcb7c0c378be4783620487ae30cb77cf5b6"},"previous_names":["mthaip/tw-epic-spinners"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/mthaip/tw-epic-spinners","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mthaip%2Ftw-epic-spinners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mthaip%2Ftw-epic-spinners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mthaip%2Ftw-epic-spinners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mthaip%2Ftw-epic-spinners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mthaip","download_url":"https://codeload.github.com/mthaip/tw-epic-spinners/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mthaip%2Ftw-epic-spinners/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33452035,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-24T19:21:36.376Z","status":"ssl_error","status_checked_at":"2026-05-24T19:21:10.562Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["animation-css","css","html","javascript","loading-animations","loading-screen","loading-spinner","react","spinners","tailwindcss","tailwindcss-plugin","tailwindcss-v3","tailwindcss-v4","typescript","vue"],"created_at":"2025-04-08T13:26:35.192Z","updated_at":"2026-05-24T22:04:52.209Z","avatar_url":"https://github.com/mthaip.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- This file is generated from demo/content/documentation.md by scripts/build-readme.mjs. Do not edit directly. --\u003e\n\u003c!-- cSpell:words semipolar rhombuses mthaip --\u003e\n\n# tw-epic-spinners\n\n\u003e 20 pure-CSS loading spinners as a Tailwind CSS plugin. Works with Tailwind v3 and v4, and any framework.\n\nLive previews \u0026 docs: [tw-epic-spinners.mthaip.com](https://tw-epic-spinners.mthaip.com)\n\n\u003c!-- cSpell:words semipolar rhombuses --\u003e\n\n## Introduction\n\n`tw-epic-spinners` is a Tailwind CSS plugin that provides 20 pure-CSS loading spinners. Supports Tailwind v3 and v4.\n\nThis library is the Tailwind CSS port of [epic-spinners](http://epic-spinners.epicmax.co/) by [EpicMax](https://github.com/epicmaxco/epic-spinners).\n\n## Installation\n\n```bash\nnpm install --save-dev tw-epic-spinners\n\n# Or use Yarn\nyarn add -D tw-epic-spinners\n\n# Or use pnpm\npnpm add -D tw-epic-spinners\n```\n\n## Usage\n\nThen, when using Tailwind CSS v4, add the plugin to your main stylesheet:\n\n```css\n/* Your main css file */\n@import \"tailwindcss\";\n@plugin \"tw-epic-spinners\";\n```\n\nIf you are still using Tailwind CSS v3, add the plugin to your `tailwind.config.js` file:\n\n```typescript\nimport spinners from 'tw-epic-spinners';\n\nexport default {\n  // Other configs\n  plugins: [spinners],\n};\n```\n\n## Core concepts\n\n### Using Spinner Creator (BETA)\n\n`creator(spinner, classes?) =\u003e string`\n\nReturns an HTML string for a given spinner type, which can be injected into your UI.\n\n#### Parameters\n\n- `spinner` (`string`): Spinner name (see [Spinners](#spinners) section).\n\n- `classes` (`string | string[]`, optional): Additional classes to apply to the spinner wrapper. Can be a string or array of Tailwind utility classes.\n\n#### Returns\n\n- `string`: HTML markup string representing the selected spinner.\n\n#### Usage Examples\n\n##### Vue\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv v-html=\"spinnerHTML\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { creator } from 'tw-epic-spinners';\n\nconst spinnerHTML = creator('spinner-half-circle', ['spinner-size-12', 'sm:spinner-size-16', 'spinner-duration-[2.5s]']);\n\u003c/script\u003e\n```\n\n##### React\n\n```tsx\nimport { creator } from 'tw-epic-spinners';\n\nconst Spinner = () =\u003e {\n  const html = creator('spinner-half-circle', 'spinner-size-12 sm:spinner-size-16 spinner-duration-[2.5s]');\n\n  return \u003cdiv dangerouslySetInnerHTML={{ __html: html }} /\u003e;\n};\n\nexport default Spinner;\n```\n\n\n### Spinners\n\nThere are 20 spinners. Each is a single utility class applied to a `\u003cdiv\u003e`, with the inner markup shown below.\n\n#### `spinner-flower`\n\n```html\n\u003cdiv class=\"spinner-flower\"\u003e\n  \u003cdiv\u003e\n    \u003cdiv /\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-pixel`\n\n```html\n\u003cdiv class=\"spinner-pixel\" /\u003e\n```\n\n#### `spinner-hollow-dots`\n\n```html\n\u003cdiv class=\"spinner-hollow-dots\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-intersecting-circles`\n\n```html\n\u003cdiv class=\"spinner-intersecting-circles\"\u003e\n  \u003cdiv\u003e\n    \u003cdiv /\u003e\n    \u003cdiv /\u003e\n    \u003cdiv /\u003e\n    \u003cdiv /\u003e\n    \u003cdiv /\u003e\n    \u003cdiv /\u003e\n    \u003cdiv /\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-orbit`\n\n```html\n\u003cdiv class=\"spinner-orbit\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-radar`\n\n```html\n\u003cdiv class=\"spinner-radar\"\u003e\n  \u003cdiv\u003e\n    \u003cdiv /\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003cdiv /\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003cdiv /\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003cdiv /\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-scaling-squares`\n\n```html\n\u003cdiv class=\"spinner-scaling-squares\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-half-circle`\n\n```html\n\u003cdiv class=\"spinner-half-circle\" /\u003e\n```\n\n#### `spinner-trinity-rings`\n\n```html\n\u003cdiv class=\"spinner-trinity-rings\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-fulfilling-square`\n\n```html\n\u003cdiv class=\"spinner-fulfilling-square\" /\u003e\n```\n\n#### `spinner-circles-to-rhombuses`\n\n```html\n\u003cdiv class=\"spinner-circles-to-rhombuses\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-semipolar`\n\n```html\n\u003cdiv class=\"spinner-semipolar\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-self-building-square`\n\n```html\n\u003cdiv class=\"spinner-self-building-square\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-swapping-squares`\n\n```html\n\u003cdiv class=\"spinner-swapping-squares\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-fulfilling-bouncing-circle`\n\n```html\n\u003cdiv class=\"spinner-fulfilling-bouncing-circle\" /\u003e\n```\n\n#### `spinner-fingerprint`\n\n```html\n\u003cdiv class=\"spinner-fingerprint\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-spring`\n\n```html\n\u003cdiv class=\"spinner-spring\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-atom`\n\n```html\n\u003cdiv class=\"spinner-atom\"\u003e\n  \u003cdiv\u003e\n    \u003cdiv /\u003e\n    \u003cdiv /\u003e\n    \u003cdiv /\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-looping-rhombuses`\n\n```html\n\u003cdiv class=\"spinner-looping-rhombuses\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/div\u003e\n```\n\n#### `spinner-breeding-rhombus`\n\n```html\n\u003cdiv class=\"spinner-breeding-rhombus\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/div\u003e\n```\n\n### Utility\n\n#### Size\n\nThe `spinner-size-*` utility class allows you to quickly define the size of a spinner.\n\nIt follows a similar pattern to [Tailwind CSS spacing](https://tailwindcss.com/docs/theme#spacing) utilities.\n\n```html\n\u003cdiv class=\"spinner-fulfilling-square spinner-size-16\" /\u003e\n```\n\nUsing arbitrary values:\n\n```html\n\u003cdiv class=\"spinner-fulfilling-square spinner-size-[70px]\" /\u003e\n```\n\n#### Duration\n\nThe `spinner-duration-*` utility class allows you control the duration.\n\nIt follows also a similar pattern to [Tailwind CSS Transition duration](https://tailwindcss.com/docs/transition-duration) utilities.\n\n```html\n\u003cdiv class=\"spinner-fulfilling-square spinner-duration-1000\" /\u003e\n```\n\nUsing arbitrary values:\n\n```html\n\u003cdiv class=\"spinner-fulfilling-square spinner-duration-[2.5s]\" /\u003e\n```\n\n#### Color\n\nColor can be controlled by [Tailwind CSS Text Color utility](https://tailwindcss.com/docs/text-color).\n\n```html\n\u003cdiv class=\"spinner-fulfilling-square text-sky-600\" /\u003e\n```\n\nColor follows `currentColor`, so any Tailwind text-color utility works (including arbitrary values and responsive prefixes).\n\n## Credits\n\nSpinner designs by [EpicMax / epic-spinners](https://github.com/epicmaxco/epic-spinners). This package re-implements them as a Tailwind plugin.\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmthaip%2Ftw-epic-spinners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmthaip%2Ftw-epic-spinners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmthaip%2Ftw-epic-spinners/lists"}