fix(spinner): spinner animation (#5815)

* fix(components/spinner): restore linear rotation (fix #5794)

* fix(spinner): add patch changeset for spinner delay fix

* fix(spinner): restore linear rotation for spinner variant (fix #5794)

* chore: apply Prettier and ESLint fixes to animation util

* chore(theme): lint

* chore(changeset): update msg & add issue number

* chore(changeset): include theme package

* chore(spinner): bump theme peerDependencies

---------

Co-authored-by: WK <wingkwong.code@gmail.com>
This commit is contained in:
Vishesh Verma 2025-10-27 23:29:58 +05:30 committed by GitHub
parent 328c57d8ea
commit 1782961859
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 9 additions and 3 deletions

View File

@ -0,0 +1,6 @@
---
"@heroui/spinner": patch
"@heroui/theme": patch
---
Fix spinner animation (#5794)

View File

@ -38,7 +38,7 @@
"peerDependencies": { "peerDependencies": {
"react": ">=18 || >=19.0.0-rc.0", "react": ">=18 || >=19.0.0-rc.0",
"react-dom": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0",
"@heroui/theme": ">=2.4.17" "@heroui/theme": ">=2.4.23"
}, },
"dependencies": { "dependencies": {
"@heroui/system-rsc": "workspace:*", "@heroui/system-rsc": "workspace:*",

View File

@ -24,7 +24,6 @@ const spinner = tv({
dots: "relative rounded-full mx-auto", dots: "relative rounded-full mx-auto",
spinnerBars: [ spinnerBars: [
"absolute", "absolute",
"animate-fade-out",
"rounded-full", "rounded-full",
"w-[25%]", "w-[25%]",
"h-[8%]", "h-[8%]",

View File

@ -1,8 +1,9 @@
export default { export default {
/** Animation Utilities */ /** Animation Utilities */
".spinner-bar-animation": { ".spinner-bar-animation": {
animation: "fade-out 1.2s linear infinite",
"animation-delay": "calc(-1.2s + (0.1s * var(--bar-index)))", "animation-delay": "calc(-1.2s + (0.1s * var(--bar-index)))",
transform: "rotate(calc(30deg * var(--bar-index)))translate(140%)", transform: "rotate(calc(30deg * var(--bar-index))) translate(140%)",
}, },
".spinner-dot-animation": { ".spinner-dot-animation": {
"animation-delay": "calc(250ms * var(--dot-index))", "animation-delay": "calc(250ms * var(--dot-index))",