How to make an icon spin in React

user_11058297 0
Viewed 1404

I'm trying to make a spinning icon through React and I think there's something I'm missing in my attempt. Here's my return function.

  return (
    <div className="loader">
      <p>Loading Data</p>
      <FaIcons.FaCog className="loaderIcon"/>
    </div>
  );

And here's the CSS.

.loaderIcon .spin.FaIcons{
    margin-right: 7px;
    top: 2px;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }
    to {
        transform: scale(1) rotate(360deg);
    }
}

Does anyone know why the icon isn't spinning?

reactjs css html
2 Answers

Turns out the problem was that I was referencing the wrong class. I only had to reference the icon class.

.loaderIcon {
    margin-right: 7px;
    top: 2px;
    animation: spin 1s infinite linear;
}
user_110582970

The CSS selector you are using, .loaderIcon .spin.FaIcons, is very specific. If you want the element rendered from the FaIcons.FaCog to spin, change your selector to .loaderIcon, .spin.FaIcons. There is a comma inserted, turning this into a selector list, instead of a single selector.

E.g. .loaderIcon AND .spin.FaIcons, instead of .loaderIcon .spin.FaIcons;

This is more of a CSS issue than React, so it applies in other web apps as well.

user_140692060
Related