Fidget spinner like animation using CSS and more in NextJS with examples

Cover Image for Fidget spinner like animation using CSS and more in NextJS with examples
toofancoder
toofancoder

If you want to head over to the code on Github, there you go.

Using version as below

  • NextJS - 15.0.1
  • ReactJS - 19.0.0

Thought I will write a easy to use/copy-paste a gist/sample code to show a fidget spinner like animation

Show me the code

Lets define a simple animation using transform property and use cubic-bezier function to give it a fidget spinner like motion feel in our .css file

@keyframes fidget_spinner {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  100% {
    transform: rotate(1800deg);
  }
}

Next, lets define a container as below in the same css file

.spinner {
    width: 100px;
    height: 100px;
    animation: fidget_spinner 5s infinite;
  }

Now, simply use it in our react/nextjs file.

<Image
    className={styles.spinner}
    aria-hidden
    src="/spinner.png"
    alt="Spinner Icon"
    width={300}
    height={300}
  />