Загрузчик не вращается, когда находится внутри гибкого контейнера

Question

Я использую библиотеку Semantic UI для создания своего приложения React.Я использую Loader , и где-то в моем компоненте у меня есть что-то вроде этого:

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

, и все работает нормально.Однако Loader не центрируется в div, поэтому я изменил div-обертку так, чтобы он был похож на <div className="centered">, где:

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

Теперь Loader центрируется, но не вращается в браузере Safari !Как можно решить?

В Chrome все работает нормально.

Answer 1

Чтобы решить проблему с центрированием, вам могут понадобиться веб-наборы:

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;

Тогда просто позабавьте меня в анимации, это сделано с помощью CSS-анимации (ключевые кадры)?Если вы, возможно, вы пропустили последний этап анимации и забыли 100% ключевой кадр?Я думаю, что это сбило меня с толку раньше.