Skip to content

Instantly share code, notes, and snippets.

@neftaly
Created December 1, 2024 00:18
Show Gist options
  • Save neftaly/5584f1eb836f50dfe8021c46cb0e6436 to your computer and use it in GitHub Desktop.
Save neftaly/5584f1eb836f50dfe8021c46cb0e6436 to your computer and use it in GitHub Desktop.
pmndrs react-three-fiber uikit animated loading spinner
import { Container } from "@react-three/uikit";
import { Loader } from '@react-three/uikit-lucide'
import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
const LoadingSpinner = ({ ...props }) => {
const ref = useRef()
useFrame(({ clock }) => {
ref.current.setStyle({ "transformRotateZ": clock.getElapsedTime() * -100 })
})
return (
<Container {...props}>
<Loader ref={ref} />
</Container>
)
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment