{"id":13480386,"url":"https://github.com/aniftyco-archive/tailwindcss-spinner","last_synced_at":"2025-09-30T15:31:13.699Z","repository":{"id":65412315,"uuid":"126922420","full_name":"aniftyco-archive/tailwindcss-spinner","owner":"aniftyco-archive","description":"Spinner utility for Tailwind CSS","archived":true,"fork":false,"pushed_at":"2020-08-02T18:52:14.000Z","size":91,"stargazers_count":170,"open_issues_count":0,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-11T01:20:37.782Z","etag":null,"topics":["spinner","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tailwindcss-spinner","language":"JavaScript","has_issues":false,"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/aniftyco-archive.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}},"created_at":"2018-03-27T03:17:43.000Z","updated_at":"2023-11-30T06:38:52.000Z","dependencies_parsed_at":"2023-01-22T07:45:17.232Z","dependency_job_id":null,"html_url":"https://github.com/aniftyco-archive/tailwindcss-spinner","commit_stats":null,"previous_names":["aniftyco-archive/tailwindcss-spinner","aniftyco/tailwindcss-spinner"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aniftyco-archive%2Ftailwindcss-spinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aniftyco-archive%2Ftailwindcss-spinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aniftyco-archive%2Ftailwindcss-spinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aniftyco-archive%2Ftailwindcss-spinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aniftyco-archive","download_url":"https://codeload.github.com/aniftyco-archive/tailwindcss-spinner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219872008,"owners_count":16554482,"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":["spinner","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"created_at":"2024-07-31T17:00:38.345Z","updated_at":"2025-09-30T15:31:08.389Z","avatar_url":"https://github.com/aniftyco-archive.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":[],"readme":"# Tailwind CSS Spinner\n\u003e Spinner utility for Tailwind CSS\n\n**NOTICE:** This package is now deprecated and archived as Tailwind CSS v1.6 introduced animations with [spinners](https://tailwindcss.com/docs/animation/#spin) in the examples. Please use that instead.\n\n## Installation\n\nAdd this plugin to your project:\n\n```bash\n# Install using pnpm\npnpm install --save-dev tailwindcss-spinner\n\n# Install using npm\nnpm install --save-dev tailwindcss-spinner\n\n# Install using yarn\nyarn add -D tailwindcss-spinner\n```\n\n## Usage\n\n```js\n// tailwind.config.js\n{\n  theme: { // defaults to these values\n    spinner: (theme) =\u003e ({\n      default: {\n        color: '#dae1e7', // color you want to make the spinner\n        size: '1em', // size of the spinner (used for both width and height)\n        border: '2px', // border-width of the spinner (shouldn't be bigger than half the spinner's size)\n        speed: '500ms', // the speed at which the spinner should rotate\n      },\n      // md: {\n      //   color: theme('colors.red.500', 'red'),\n      //   size: '2em',\n      //   border: '2px',\n      //   speed: '500ms',\n      // },\n    }),\n  },\n\n  variants: { // all the following default to ['responsive']\n    spinner: ['responsive'],\n  },\n\n  plugins: [\n    // optional configuration for resulting class name and/or tailwind theme key\n    require('tailwindcss-spinner')({ className: 'spinner', themeKey: 'spinner' }),\n  ],\n}\n```\n\n### Resulting CSS:\n\n```css\n.spinner {\n  position: relative;\n  color: transparent !important;\n  pointer-events: none;\n}\n\n.spinner::after {\n  content: '';\n  position: absolute !important;\n  top: calc(50% - (1em / 2));\n  left: calc(50% - (1em / 2));\n  display: block;\n  width: 1em;\n  height: 1em;\n  border: 2px solid currentColor;\n  border-radius: 9999px;\n  border-right-color: transparent;\n  border-top-color: transparent;\n  animation: spinAround 500ms infinite linear;\n}\n\n@keyframes spinAround {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n```\n\n## Example\n\n![](https://i.imgur.com/UbwGglQ.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faniftyco-archive%2Ftailwindcss-spinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faniftyco-archive%2Ftailwindcss-spinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faniftyco-archive%2Ftailwindcss-spinner/lists"}