Loader isn't spinning when it's inside flex container

Question

I'm using Semantic UI library to build my React app. I'm using a Loader, and somewhere in my component I have something like this:

if (loading) {
  return (
    <div>
      <div className="ui active inline loader" />
    </div>
  );
}

and everything works fine. However, Loader is not centered in the div, so I modified wrapper div to be like <div className="centered">, where:

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

Now, Loader is centered but is not spinning in Safari browser! How can solve it?

In Chrome it works fine.

Answer 1

To solve the centring issue, you may need the webkits:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;

Then just humour me on the animation, is it done using a CSS animation (keyframes)? If you are you may have missed out the last leg of the animation and forgotten the 100% keyframe? I think this has tripped me up before.