DEV Community

Discussion on: Spinner Animation in React

View post
Collapse
 
josemunoz profile image
José Muñoz • • Edited

in pure CSS this would basically just be:

.loader {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  border: 1rem solid lightgray;
  border-top: 1rem solid dodgerblue;  
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
darthknoppix profile image
Seth Corker •

Yep, thanks for adding an example. It’s very easy with CSS, I just thought I’d make an example of a simple step in Framer Motion. The power only comes in when you start adding dynamic changes or scheduling/orchestrating multiple animations.

With that being said, you can do amazing things with only CSS without ever touching JS!